vue对接腾讯地图，获取经纬度

1：获取腾讯地图key

https://lbs.qq.com/console/mykey.html
2:
在js中引入腾讯提供的js

export function TMap() {
  return new Promise(function(resolve, reject) {
    window.init = function() {
      resolve(qq)
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'http://map.qq.com/api/js?v=2.exp&callback=init&key=这里填申请的秘钥'
    script.onerror = reject
    document.head.appendChild(script)
  })
}

3：
vue

<template>
  <div id="atlas"></div>
</template>
<script>
  import { TMap } from '@/api/parking'
  export default {
    name: 'parking-parkText',
    data() {
      return {}
    },
    methods: {
      mapTX() {
        TMap().then(qq => {
          var map = new qq.maps.Map(document.getElementById('atlas'), {
            //这里经纬度代理表进入地图显示的中心区域
            center: new qq.maps.LatLng(22.53588500, 113.95251400),
            zoom: 13
          })
          //绑定单击事件添加参数
          qq.maps.event.addListener(map, 'click', function(event) {
            alert('您点击的位置为: [' + event.latLng.getLat() + ', ' +
              event.latLng.getLng() + ']')
          })
        })
      }
    },
    created() {
      this.mapTX()
    }
  }
</script>

<style>
  #atlas {
    min-width: 600px;
    min-height: 767px;
    width: 50%;
  }
</style>

5：效果图

腾讯也提供了别的api，这里因需求需要，采用获取经纬度

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/jijilan/article/details/85095364
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-06-14 18:35:56
阅读 ( 1799 )
分类：前端

vue对接腾讯地图，获取经纬度

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看