The experience of using vue-baidu-map (stepping on the pit)

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.

The experience of using vue-baidu-map (stepping on the pit)

Guess you like