【vue引入腾讯地图、多边形绘制、标记点提示、绘制热力图】

在Vue项目中使用腾讯地图

实现结果

1、引入script

在public目录下，找到index.html文件，引入外部js文件,key为自己申请的腾讯地图地址

<script src="https://map.qq.com/api/gljs?v=1.exp&key=Y2ABZ-URA6Z-XDLXO-7AAIO-xxxxx-xxxxx&libraries=visualization"></script>

2、页面代码

2.1 这个div用来存放地图

<div ref="Container" style="width:1000px;height:600px;"/>

2.2 初始化地图

 mounted() {
   
      this.initMap()
    },

initMap() {
   
        //地图中心点坐标
        var center = [39.909897147274364, 116.39756310116866]
        // 定义map变量，调用 TMap.Map() 构造函数创建地图
        var map=  new window.TMap.Map(this.$refs.Container, {
   
          center: new window.TMap.LatLng(center[0],center[1]), // 设置地图中心点坐标
          zoom: 17.2, // 设置地图缩放级别
          minZoom:8,  //此处设置地图的最大最小缩放级别
          maxZoom:17.2,
          pitch:0, // 设置俯仰角
          rotation: 45, // 设置地图旋转角度
          showSatellite:true,
          showControl:true,
        })

2.3 绘制多边形

    //地图上要显示的各个点坐标（拐点）
        var pathStr = ['39.90189, 116.39156','39.90290, 116.39857','39.90392, 116.40360','39.90496, 116.39465']
        var paths = []
        for(var i=0; i<pathStr.length; i++){
   
          paths.push(new window.TMap.LatLng(pathStr[i].split(",")[0], pathStr[i].split(",")[1]))
        }

        //绘制图层多边形(轮廓）
        var polygon =  new window.TMap.MultiPolygon({
   
          id: 'polygon-layer', // 图层id
          map:map, // 显示多边形图层的底图
          styles: {
   
            // 多边形的相关样式
            polygon: new window.TMap.PolygonStyle({
   
              color: 'rgba(0,125,255,0.4)', // 面填充色
              showBorder: true, // 是否显示拔起面的边线
              borderColor: '#00FFFF', // 边线颜色