在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>