vue2使用腾讯地图总结

vue2引入腾讯地图(JavaScript API V2)：

同步：

在index.html页面添加，在页面就可以直接使用

<script type="text/javascript" charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=给的key值"></script>

异步：

新建在 src/utils文件下新建 txMap.js

export default {
  init: function () {
    const mapUrl = "https://map.qq.com/api/js?v=2.exp&key=给的key值&callback=onMapCallback";
    return new Promise((resolve) => {
      // 地图异步加载回调处理
      window.onMapCallback = function () {
        resolve(qq.maps);
      };
      let scriptLabel = document.createElement("script");
      scriptLabel.setAttribute("type", "text/javascript");
      scriptLabel.setAttribute("src", mapUrl);
      document.body.appendChild(scriptLabel);
    });
  }
}

在页面中使用：

（基础的覆盖物和基础参数）

开发文档： JavaScript API | 腾讯位置服务

参数具体使用看参考手册(很详细)

<template>
  <div id="container"></div>
</template>
<script>
import TXMap from "@/utils/initMap"; //导入
export default {
  data() {
    return {
      Map: null,
      zoom: 10,
    };
  },
  mounted() {
    TXMap.init().then((TXMap) => {
      this.TXMap = TXMap;
      this.map = new TXMap.Map(document.getElementById("container"), {
        //配置地图参数
        center: new TXMap.LatLng(30.228232, 120.051238), //地图中心点 维度，经度
        zoom: this.zoom, //设置缩放级别
        draggable: false, //设置是否可以拖拽
        scrollwheel: false, //设置是否可以滚动
        disableDoubleClickZoom: true, //设置是否可以双击放大
        disableDefaultUI: true, //隐藏所有地图控件
      });
    });
  },
  methods: {
    loadMap() {
      new this.TXMap.Circle({
        //向地图中添加圆
        map: this.map, //要显示圆形的地图
        center: new this.TXMap.LatLng(30.228232, 120.051238), //圆形的中心点坐标
        radius: 500, //圆形的半径
        strokeColor: "#fff", //圆形的边框颜色
        fillColor: new this.TXMap.Color(255, 255, 255, 0.3), //圆形的填充色
        strokeWidth: 1, //圆形的边框线宽
      });
      data.forEach((x) => {
        //向地图中添加多边形区域,data->坐标点数组
        new this.TXMap.Polygon({
          map: this.map,
          path: new this.TXMap.LatLng(x.dots), //dots->坐标点
          fillColor: new this.TXMap.Color.fromHex("#ccc", 0.5), //填充的颜色
          strokeWeight: 0, //边框宽度
        });
      });
      let cssC = {
        //这种方式添加样式更全，适合动态添加样式
        backgroundColor: "#ccc",
        fontSize: "20px",
        lineHeight: "20px",
        borderRadius: "4px",
        color: "#000",
        border: 0,
      };
      let label = new this.TXMap.Label({
        //向地图中添加标签(一个可以随意改变的块元素，而marker自带一个定位点的图片)
        map: this.map,
        zIndex: 12,
        content: "123456", //文本
        offset: new this.TXMap.Size(-10, -10), //偏移量(相对坐标偏移)
        position: new this.TXMap.LatLng(30.228232, 120.051238), //坐标位置
      });
      label.setStyle(cssC);
      data.forEach((x) => {
        //向地图中添加折线
        new this.TXMap.Polyline({
          map: this.map,
          path: new this.TXMap.LatLng(x.dots),
          strokeWeight: 3, // 线条宽度，默认为 1
          StrokeDashStyle: "dash", //线条样式
          strokeColor: "#00f", // 线条颜色
        });
      });
    },
  },
};
</script>
<style>
#container {
  width: 800px;
  height: 600px;
}
</style>

vue2使用腾讯地图总结

悦读