vue 引入腾讯地图

//如果在根目录没找到 index.html ，那你的项目可能是用 vue-cli 搭建的。 在 public 里面可以找到 index.html
//这俩行代码丢进去就行了
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key= 腾讯地图-控制台-添加应用生成的key "></script>
  <script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

 

从头到尾复制进去就行了。

 

<div id="container" style="width:600px;height:500px;"></div>

 

//初始化地图
    initMap(){

      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      //设置地图中心点
      var myLatlng = new qq.maps.LatLng(39.916527,116.397128);
      //定义工厂模式函数
      var myOptions = {
        zoom: 8,               //设置地图缩放级别
        center: myLatlng,      //设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
      }
      //获取dom元素添加地图信息
      var map = new qq.maps.Map(document.getElementById("container"), myOptions);

    },

 

进阶玩法：

 

//请求失败会再次调用方法去请求

showErr() {
      this.Tmap(); //定位失败再请求定位，测试使用
    },

 

 

//获取城市和经纬度

//获取城市和经纬度
    showPosition(position) {
      this.latitude = position.lat;
      this.longitude = position.lng;
      this.city = position.city;

      this.initMap()

    },

 

 

 

//获取定位

//获取定位
    Tmap() {
      var geolocation = new qq.maps.Geolocation("KKSBZ-53WRP-GBSD7-LE373-SGAQO-6UB7I", "mapqq");
      // geolocation.getIpLocation(this.showPosition, this.showErr);
      geolocation.getLocation(this.showPosition, this.showErr); //或者用getLocation精确度比较高
    },

 

//地图添加覆盖物

//设置圆形覆盖物的颜色和透明度rgba
      var circle_color = new qq.maps.Color(
        Number(170),
        Number(204),
        Number(238),
      0.5);

      var circles = new qq.maps.Circle({
        center : myLatlng, // 设置中心店
        radius:100, // 范围大小 
        strokeWeight:2, // 宽度设置
        fillColor:circle_color, //填充颜色
        map: map
      })

 

 

//地图初始化

//初始化地图
    initMap(){

      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      //设置地图中心点
      var myLatlng = new qq.maps.LatLng(this.latitude,this.longitude);
      //定义工厂模式函数
      var myOptions = {
        zoom: 15,               //设置地图缩放级别
        center: myLatlng,      //设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
      }

      //获取dom元素添加地图信息
      var map = new qq.maps.Map(document.getElementById("container"), myOptions);

      //地图标点 => 单点
      var marker = new qq.maps.Marker({
        position: myLatlng ,
        map: map
      });

    },

 

//https://www.cnblogs.com/weiyangoo/p/7220578.html