vue百度地图 + 定位的详解

2019-11-19 11:35:28

字体：大中小

来源：转载

供稿：网友

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>