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