npm package: @south-rd/smarthub-map
Description: 腾讯地图组件
Latest version: 1.0.9

# smart-map

一款基于腾讯地图 API 开发的 map

## 本地项目初始化

```
yarn install
```

### 查看例子

```
yarn dev
```

### 组件打包

```
yarn run lib
```

### 基于 elementui，使用响应式处理元素 PC、手机样式

### 本地开发调试

本地项目 执行组件打包命令

```
yarn run lib
```

开启文件链接

```
yarn link
```

vue 项目中安装

```
yarn add @south-rd/smarthub-map
```

### 本地项目环境安装本组件

项目链接引用

```
yarn link @south-rd/smarthub-map
```

引入组件

```
import smarthubMap from '@south-rd/smarthub-map'
import '@south-rd/smarthub-map/lib/smarthub-map.css'
Vue.use(smarthubMap)
```

### 使用组件

组件名称

```
<smarthub-map></smarthub-map>
```

组件参数

```
<template>
  <div id="app">
    <div class="m">
      <smarthub-map
        ref="map"
        @getPos="getPos"
        
        @position-information="positionInformation"
        :geometriesCenter="geometriesCenter"
        :markerLayerOnly="markerLayerOnly"
        :markerLayerLine="markerLayerLine"
      />
    </div>

    <button style="position: fixed; top: 0; left: 0" @click="query">
      获取距离
    </button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      // geometries: 2000, //可监控区域半径
      position: {
        zoom: 13, //设置地图缩放级别
        pitch: 15, //设置俯仰角
        rotation: 45, //设置地图旋转角度
        setPosition: "bottomRight", //topRight上面//bottomRight下面//不存在则不显示
        mayApp: "",
        city: "",
      },
      markerLayerOnly: {
        //个人定位标注
        //个人定位
        // width: 25,
        // height: 35,
        // anchor: { x: 16, y: 32 },
        src:
          "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png",
      },
      markerLayerLine: {
        //可进行多点标注
        // width: 25,
        // height: 35,
        // anchor: { x: 16, y: 32 },
        // src:
        //   "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png",
        // positionList: [
        //   { longitude: 31.337297, latitude: 121.48216 },
        //   { longitude: 31.25592, latitude: 121.491887 },
        // ],
      },
      geometriesCenter: {
        //设置监控区域毕传
        //设置可监控地点中心坐标
        longitude: 118.655297,
        latitude: 32.059984,
        // src:''
      },
      geolocation: null,
    };
  },
  mounted() {},
  methods: {
    // fatherMethod(res) {
    //   console.log("app", res);
    //   //参考https://lbs.qq.com/webDemoCenter/glAPI/glMap/createMap调用方法
    //   //例如 this.map.getControl(),new window.TMap.Map()
    //   // console.log("扩展方法");
    //   //初始化marker图层
    // },

    getPos(val) {
      //点击获取当前点击地图位置坐标
      console.log("坐标", val);
    },
    positionInformation(res) {
      //定位反回位置信息
      console.log(res);
    },
    //////this.$refs.map.showMarkers()自适应显示多个标注点
    // ///// this.$refs.map.getdistance();//获取当前位置距离距离监控区域距离
    // ///// this.$refs.map.changeScale(scale);//地图缩放例如scale:1、2、3等
    query() {
      //获取当前位置距离
      console.log(1112121);
      console.log(this.$refs.map.getdistance());
    },
  },
};
</script>

<style lang="less">
@import url("./css/normal.css");
#app {
  width: 100%;
  height: 100vh;
  .m {
    width: 100%;
    height: 100%;
  }
}
</style>

```