在vue中使用騰訊地圖

在vue中使用騰訊地圖，

1、首先去申請一個key，可以在https://lbs.qq.com/這個網站里申請。打開是下圖這個樣子的。

 

 

 2、點擊登錄，綁定一些信息，手機號之類的，隨后點進開發者信息里，如下圖

 

 

 

 3、點擊key管理，創建新密鑰，填寫相應信息即可

 

 

 4、申請成功后是這樣的-（五位一組，共六組）

 

 

 5、在vue中引用騰訊地圖

即在index.html文件中引入

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

6、下面是創建地圖標簽

 <div id="map"></div>

7、初始化地圖

let  address=“”  
var center = new qq.maps.LatLng(
        34.754152,
        113.667636
      );
      var map = new qq.maps.Map(document.getElementById(‘map), {
        center: center,
        zoom: 13,
        disableDefaultUI: true
      });
      var marker = new qq.maps.Marker({
        position: center,
        map: map
      });
      var infoWin = new qq.maps.InfoWindow({
        map: map
      });
//此處是點擊地圖后生成的地標名稱
      var geocoder = new qq.maps.Geocoder({
        complete: function(res) {
          console.log(res);
          address = res.detail.nearPois[0].name;//這里是你點擊之處根據經緯度返回的地點名稱
        }
      });
      qq.maps.event.addListener(map, "click", function(event) {
        this.longiistude = eveisnt.latLng.getLat();
        this.latitude = event.latLng.getLng();
        console.log(event);
        let lat = new qq.maps.LatLng(
          this.longitude,
          this.latitude
        );
        geocoder.getAddress(lat);
        setTimeout(() => {
          infoWin.open();
          infoWin.setContent(
            '<div style="text-align:center;white-space:nowrap;">' +
             address +
              "</div>"
          );     //這里是標記之處的樣式
          infoWin.setPosition(event.latLng);
        }, 200);
      });

8、最后的效果如圖

 

 9、完整代碼

<template>
  <div>
    <div id="map" style="width:500px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      longitude: "",
      latitude: ""
    };
  },
  methods: {
    init() {
      let address = "";
      let that = this;
      var center = new qq.maps.LatLng(34.754152, 113.667636);
      var map = new qq.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 13,
        disableDefaultUI: true
      });
      var marker = new qq.maps.Marker({
        position: center,
        map: map
      });
      var infoWin = new qq.maps.InfoWindow({
        map: map
      });
      var geocoder = new qq.maps.Geocoder({
        complete: function(res) {
          console.log(res);
          address = res.detail.nearPois[0].name;
        }
      });
      qq.maps.event.addListener(map, "click", function(event) {
        this.longitude = event.latLng.getLat();
        this.latitude = event.latLng.getLng();
        console.log(event);
        let lat = new qq.maps.LatLng(this.longitude, this.latitude);
        geocoder.getAddress(lat);
        setTimeout(() => {
          infoWin.open();
          infoWin.setContent(
            '<div style="text-align:center;white-space:nowrap;">' +
              address +
              "</div>"
          );
          infoWin.setPosition(event.latLng);
        }, 200);
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style scoped>
</style>