Recently, I am using Vue to develop applications, and I need to use Baidu Maps. I have used JS SDK of Baidu Maps with jquery before. The basic functions have been implemented, but when I use Vue, I have to encapsulate plug-ins by myself. Of course, some of them must be at night. If you don't want to make wheels, unless the wheel is not suitable, a search is indeed ready-made, the portal is here: https://dafrok.github.io/vue-baidu-map/#/zh/index , click to enter Use the document, but there are many pits, let me talk about it here, so as not to waste time for everyone to fall into it repeatedly.
1. For the smoothness of your page, it is recommended to quote locally, as follows:
import { BaiduMap, BmScale, BmGeolocation } from 'vue-baidu-map'
Of course, I only use these, so only these are introduced. Others to be used can be imported and used according to the documentation.
2. Look at the code first
<baidu-map :center="map_center" :zoom="map_zoom" @ready="map_handler" :double-click-zoom="false" @dragend="getMapCenter" class="baidu-map-view" ak="mapAK">
<bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
</baidu-map>
When you process events on the map, it must be after the ready event, otherwise you cannot get the BMap object (mapAK is the Baidu key)
3. The map_handler method will pass in two objects. People who have used the JS SDK should know that, yes, the passed parameters are the objects in the corresponding JS sdk, which can be used directly. Although the plug-in provides tags, the corresponding There are too few properties and methods, so it is better to call the methods provided by the SDK
/* BMap是百度地图的对象,直接new出来跟原始的百度地图API一样使用,map是地图对象,可以调用对应的地图方法,比如添加marker */
map_handler({ BMap, map }) {
console.log("map_handler")
let _this = this
this.BMap = BMap
this.map = map
this.map_zoom = 15
}
have a chestnut
getCurlocation() { // 获取浏览器当前定位
if (!this.BMap) return false
let BMap = this.BMap
let geolocation = new BMap.Geolocation()
let _this = this
geolocation.getCurrentPosition(function(r) {
_this.map_center = r.point
_this.shop_lng = r.point.lng
_this.shop_lat = r.point.lat
})
}
4. Another small problem is that if it is latitude and longitude, if you want to pass it to Baidu map to find the coordinate point, you must use the Baidu map method, as follows:
let point = new BMap.Point(this.shop_lng, this.shop_lat)
Otherwise, it will not work, be sure to remember! ! !
Other basic methods can be used with reference to Baidu map JS sdk, which is probably the case.