vue cli3 百度地图定位

本文主要是介绍vue cli3 百度地图定位，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、index.html   引入js

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的key"></script>

二、vue.config.js中添加 BMap

module.exports = {configureWebpack: {externals: {"BMap": "BMap"}}
}

三、单个页面引用  import BMap from 'BMap' 调用地图，获得当前地理位置信息

<template><div class="wrap"><P>{{address}}<p><div id='container'></div></div></template><script>
import BMap from 'BMap'
export default {data() {return {address: '',}},mounted() {this.createMap()},created() {},methods: {createMap() {var that = this;var map = new BMap.Map("container");var point = new BMap.Point(116.331398, 39.897445);;map.centerAndZoom(point, 12);var geoc = new BMap.Geocoder();var geolocation = new BMap.Geolocation();geolocation.getCurrentPosition(function(r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);console.log('您的位置：' + r.point.lng + ',' + r.point.lat);var pt = r.point;geoc.getLocation(pt, function(rs) {var addComp = rs.addressComponents;that.address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber});} else {console.log('failed' + this.getStatus());}}, { enableHighAccuracy: true })},
}
}

结束语：

好了，百度地图定位就到这里啦，希望这篇文章能帮助到大家，如有不对之处，还请指正。愿我们一起成长。

这篇关于vue cli3 百度地图定位的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---