vue 使用腾讯地图

1. 根据官方文档中使用script来引入，首先要去注册一个地图的key
   指路：腾讯地图官方注册地址
2. 找到项目中的index.html通过script的方式引入 <script src="https://map.qq.com/api/gljs?v=1.exp&key=你刚刚申请的key"></script>
3. 现在去到我要生成地图的页面

<template>
  <div class="txMap">
    <div id="allmap"></div>
  </div>
</template>

data () {
    return {
      dataorigin: '',
      pointList: []
    };
  },
    mounted () {
    this.initMap2()
  },
  methods: {
  initMap2 () {
      console.log("window", window);
      // 定义地图中心点坐标
      let center = new TMap.LatLng(26.223556, 107.520795);// 坐标靠近中间
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new TMap.Map(document.getElementById("allmap"), {
        center: center,
        zoom: 10
      });
      //   //初始marker
      var marker = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        styles: {
          // mark样式
          "marker": new TMap.MarkerStyle({
            "width": 25,
            "height": 38,
            "anchor": { x: 12, y: 32 },
          })
        },
        geometries: [{
          "id": 'demo1',
          "styleId": 'marker',
          "position": new TMap.LatLng(25.916527, 107.097128),
          "properties": {
            "title": "吹梦到西洲",
            "address": "贵州省地将现代哈萨克就看见",
          }
        }]
      });
      //初始化infoWindow
      var infoWindow = new TMap.InfoWindow({
        map: map,
        position: new TMap.LatLng(26.223556, 107.520795),
        offset: { x: 0, y: -32 }, //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
      });
      infoWindow.close();//初始关闭信息窗关闭
      //监听标注点击事件
      marker.on("click", function (evt) {
        console.log(evt)
        //设置infoWindow
        infoWindow.open(); //打开信息窗
        infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
        infoWindow.setContent(`<div style="white-space:
          nowrap;margin:10px;color:#000;text-align:left;"> 
          <p style="font-size:16px;">${evt.geometry.properties.title}</p>
           </div>`);//设置信息窗内容
      })
    },
  }

效果图