前端在vue2中嵌入腾讯地图（web端）

1.在腾讯位置服务中注册登录成为开发者

        腾讯位置服务 - 立足生态，连接未来 (qq.com)

2.新建一个应用获取一个key

控制台-->应用管理-->我的应用-->创建应用-->添加key 

3.开发者文档  

创建地图 | 腾讯位置服务 (qq.com)

4.在public-->index.html中间中引入腾讯地图 （将key修改为上一步获取的key）

  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你申请的key"></script>

  <script src="https://map.qq.com/api/gljs?v=1.exp&你申请的key"></script>

  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=你申请的key"></script>

5.直接上代码 复制过去就能跑  注释写的非常清楚

<template>

    <div class="index">

        <!-- 地图容器 -->

        <div id="container"></div>

    </div>

  </template>



  <script>

  export default {

    data() {

      return {

        //点数据数组

        markerArr: [

          {

            "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id

            "styleId": 'myStyle',  //指定样式id

            "position": new TMap.LatLng(30.33610725981676, 112.24231780622101),  //点标记坐标位置

            "properties": {//自定义属性

              "title": "荆州市政府",

            }

          }

        ],

      };

    },

    methods: {

      initMap() {

        //设置一个默认的中心点 (荆州市)

        var center = new TMap.LatLng(30.35269, 112.19016)

        //初始化地图

        var map = new TMap.Map(document.getElementById('container'), {

          center: center,//设置地图中心点坐标

          // zoom: 17.2,   //设置地图缩放级别

          // pitch: 43.5,  //设置俯仰角

          // rotation: 45    //设置地图旋转角度

        });

        map.setCenter(new TMap.LatLng(this.lat, this.lng))



//使用定位来获取当前位置调整中心点

        // 新建一个IP定位类

        var ipLocation = new TMap.service.IPLocation();

        // 未给定ip地址则默认使用请求端的ip地址(params)

        var params = {};

        ipLocation.locate(params)//发送定位请求获得ip地址

        .then((result2) => {

            console.log(result2.result.location);

            //将获得的ip地址信息（经纬度）改变地图的中心点

            map.setCenter(new TMap.LatLng(result2.result.location.lat, result2.result.location.lng));

        })

        .catch((error) => {

          console.log(error);

        });



        //设定marker点及其样式

        var markerLayer = new TMap.MultiMarker({

          map: map,  //指定地图容器

          //样式定义

          styles: {

            //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）

            "myStyle": new TMap.MarkerStyle({

              "width": 25,  // 点标记样式宽度（像素）

              "height": 35, // 点标记样式高度（像素）

              // "src": './images/R-C.png',  //图片路径

              //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点

              // "anchor": { x: 16, y: 32 }  //marker点图片跟据焦点位置的偏移量

            })

          },



          //点标记数据数组

          geometries: this.markerArr

          // 点标记数组格式

          //   geometries: [

          //     {

          //     "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id

          //     "styleId": 'myStyle',  //指定样式id

          //     "position": new TMap.LatLng(30.33864600881732, 112.22565830821229),  //点标记坐标位置

          //     "properties": {//自定义属性

          //       "title": "荆州万达广场",

          //     }

          //   }

          // ]

        });



        //设置信息窗口

        var infoWindow = new TMap.InfoWindow({

          map: map,

          position: new TMap.LatLng(39.984104, 116.307503), //信息窗口默认位置

        });



        //信息窗口设置完后默认是打开的 可以先关闭初始信息窗口

        infoWindow.close();



        //监听marker点击事件

        markerLayer.on("click", function (evt) {

          infoWindow.close();//先关闭已打开信息窗口

          infoWindow.open()//再打开 并赋给新的值

          infoWindow.setPosition(evt.geometry.position);//设置信息窗位置

          infoWindow.setContent(`<div><img class="img" src="https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF" alt=""><p>${evt.geometry.properties.title}</p></div>`);//设置信息窗内容

          console.log(evt);

        })

        // 监听地图点击事件

        // map.on('click',function(evt){

        // console.log(evt);

        // })

      },



    mounted() {

        // 调用

        this.initMap();

    },

  }

  </script>

<style>

  #container {

    width: 100%;

    height: 100%;

    border: 1px solid red;

  }

  .img {

    width: 150px;

  }

</style>

效果图