vue百度地图 + 定位的详解

vue 百度地图 + 定位

 前提需要自己有百度的密钥，如没有可以去百度地图申请

一、在主目录下的index.html引入js，例如：

二、在webpack.base.conf.js配置文件中配置BMap，在module.exports 中与entry平级，例如：

三、在项目中引入BMap：

四、代码：

<template>
<div class="home">
 <div id="allmap" class="allmap"></div>
</div>
</template>

<script>
import {getStore, setStore, removeStore} from '@/config/Utils'
import BMap from 'BMap'
export default {
 data () {
  return {
   type: 'tab',
   address_detail: null,
   center: {lng: 116.40387397, lat: 39.91488908}
  }
 },
 mounted () {
  this.ready()
 },
 methods: {
  ready () {
   let map = new BMap.Map('allmap')
   let point = new BMap.Point(this.center.lng, this.center.lat)
   map.centerAndZoom(point, 10)
   map.enableScrollWheelZoom(true)
   map.enableDoubleClickZoom(true)
   var geolocation = new BMap.Geolocation()
   geolocation.getCurrentPosition((r) => {
    if (r.point) {
     this.center.lng = r.longitude
     this.center.lat = r.latitude
     let markers = new BMap.Marker(r.point)
     map.addOverlay(markers)
     map.panTo(r.point)
     map.centerAndZoom(r.point, 16)
    }
   }, { enableHighAccuracy: true })
  }
 }
}
</script>

<style>
#allmap{
 width: 100％;
 height: 15rem;
}
</style>

五、效果：

如有错误地方，请留言指教，谢谢大家

以上所述是小编给大家介绍的vue百度地图 + 定位详解整合网站的支持！

来源：https://blog.csdn.net/gh1205/article/details/78929217