【转载】Vue 引入腾讯地图

转自：https://www.cnblogs.com/majiayin/p/15671867.html

//如果在根目录没找到 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);

},</pre>

进阶玩法：

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

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

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

},</pre>

//获取定位

//获取定位
    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
  })</pre>

//地图初始化

//初始化地图
    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);

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

},</pre>

慕容的工作随笔

评论 (0)

发表评论