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

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值