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>