离线vue如何调用腾讯地图(vue引入腾讯地图获取当前经纬度)

1.登录腾讯位置服务

地址:https://lbs.qq.com/dev/console/application/mine

2.点击应用管理创建应用

离线vue如何调用腾讯地图(vue引入腾讯地图获取当前经纬度)(1)

3.新建一个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)

})

}

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

离线vue如何调用腾讯地图(vue引入腾讯地图获取当前经纬度)(2)

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页