vue-baidu-map Use of Baidu Map

In recent development, you need to use a map to record the latitude and longitude, so I specifically write your own method of use:
link recommendation
link 1: vue-baidu-map official website
link 2: vue-baidu-map document

One: the installation of the plug-in

$ npm install vue-baidu-map --save

Two: registration of the secret key

Log in to http://lbsyun.baidu.com/
2.1 Click on the console in the upper left corner
2.2 Click on my application in the management application
2.3 Click on create application
2.4 Record ak (ak is the key of Baidu map)

Three: the introduction of plug-ins

3.1 Global registration

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
 
Vue.use(BaiduMap, {
    
    
  // ak 是在百度地图开发者平台申请的密钥
  ak: 'YOUR_KEY'
})

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>
 
<style>
.bm-view {
     
     
  width: 100%;
  height: 300px;
}
</style>

3.2 Import on demand

Importing on-demand is relatively the best, reducing code memory (please refer to 5.3 for components)

import {
    
    BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker,BmNavigation} from 'vue-baidu-map'
 export default {
    
    
    components: {
    
    
      BaiduMap,
      BmControl,
      BmView,
      BmAutoComplete,
      BmLocalSearch,
      BmMarker,
      BmNavigation,
    },
    data：function(){
    
    
      return {
    
    
      }
    }
}

<baidu-map v-bind:style="mapStyle" class="bm-view" ak="YOUR_KEY"
      :center="center" 
      :zoom="zoom" 
      :min-zoom="minZoom"
      :scroll-wheel-zoom="true" 
      @click="getClickInfo">
        <bm-view style="width: 100%; height:500px;"></bm-view>
        <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        </bm-marker>
        <bm-control :offset="{width: '10px', height: '10px'}">
          <bm-auto-complete v-model="keyword" :sugStyle="{
       
       zIndex: 999999}">
            <input type="text" placeholder="请输入大致位置" class="serachinput">
          </bm-auto-complete>
        </bm-control>
        <bm-local-search :keyword="keyword" :auto-viewport="true" style="width:0px;height:0px;overflow: hidden;"></bm-local-search>
      </baidu-map>

At this time, the renderings are as follows

Four: common problems

4.1 The BaiduMap component container itself is an empty block-level element. If the container does not define a height, the Baidu Map will be rendered in an invisible container with a height of 0.

4.2 Map components that have not set the center and zoom properties will not perform map rendering. An exception is when the center attribute is a legal place name string, because Baidu Maps will automatically adjust the zoom value according to the place name.

4.3 Since Baidu Map JS API only has a loading method of JSONP, rendering of BaiduMap component and all its sub-components can only be asynchronous. Therefore, please use the ready event of the component to execute the code that can be executed after the map API is loaded. Don't try to call the BMap class in the life cycle of Vue itself, let alone modify the model layer at these times.

Five: attributes

5.1 instance attributes

Attribute name	Types of	Defaults	description
if	String		The key applied by the Baidu Map Developer Platform is only declared when the component is partially registered.
center	Point, String		For positioning, you can use regional strings such as "Haizhu District, Guangzhou", or you can use objects such as {lng: 116.404, lat: 39.915} to indicate latitude and longitude
zoom	Number		Zoom level
min-zoom	Number		Minimum zoom level
max-zoom	Number		Maximum zoom level
high-resolution	Boolean	true	High score screen mode This item is only loaded once when the map component is mounted
map-click	Boolean	true	Allow clicking the item to be loaded only once when the map component is mounted
map-type	String	global.BMAP_NORMAL_MAP	Map type
dragging	Boolean	true	Allow drag and drop
scroll-wheel-zoom	Boolean	false	Allow mouse wheel zoom
double-click-zoom	Boolean	true	Allow double click to zoom
keyboard	Boolean	true	Allow keyboard operation
inertial-dragging	Boolean	false	Allow inertial drag
continuous-zoom	Boolean	false	Allow infinite zoom
pinch-to-zoom	Boolean	true	Allow pinch zoom
auto-resize	Boolean	true	Allow adaptive container size
mapStyle	MapStyle		Custom map style theme
theme	Array		Custom theme, which is an alias of mapStyle.styleJson property, may be removed in the next major version, it is not recommended

5.2 Event

Event name	parameter	description
click	{type, target, point, pixel, overlay}	This event is triggered when the map is left clicked. When double-clicking, the sequence of events generated is: click click dblclick
dblclick	{type, target, pixel, point}	This event is triggered when the mouse is double-clicked on the map
rightclick	{type, target, point, pixel, overlay}	This event is triggered when the map is right-clicked. When double-clicking, the sequence of events generated is: rightclick rightclick rightdblclick
rightdblclick	{type, target, point, pixel, overlay}	This event is triggered when right-clicking on the map
maptypechange	{type, target}	This event is triggered when the map type changes
mousemove	{type, target, point, pixel, overlay}	This event is triggered when the mouse is moving in the map area
mouseover	{type, target}	This event is triggered when the mouse moves into the map area
mouseout	{type, target}	This event is triggered when the mouse moves out of the map area
movestart	{type, target}	This event is triggered when the map movement starts
moving	{type, target}	This event is triggered when the map is moving
moveend	{type, target}	This event is triggered when the map movement ends
zoomstart	{type, target}	This event is triggered when the zoom level of the map changes.
zooming	{type, target}	地图更改缩放级别结束时触发触发此事件
addoverlay	{type, target}	当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件
addcontrol	{type, target}	当使用Map.addControl()方法向地图中添加单个控件时会触发此事件
removecontrol	{type, target}	当使用Map.removeControl()方法移除单个控件时会触发此事件
removeoverlay	{type, target}	当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件
clearoverlays	{type, target}	当使用Map.clearOverlays()方法一次性移除全部覆盖物时会触发此事件
dragstart	{type, target, pixel, point}	开始拖拽地图时触发
dragging	{type, target, pixel, point}	拖拽地图过程中触发
dragend	{type, target, pixel, point}	停止拖拽地图时触发
addtilelayer	{type, target}	添加一个自定义地图图层时触发此事件
removetilelayer	{type, target}	移除一个自定义地图图层时触发此事件
load	{type, target, pixel, point, zoom}	调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图图块
resize	{type, target, size}	地图可视区域大小发生变化时会触发此事件
hotspotclick	{type, target, spots}	点击热区时触发此事件
hotspotover	{type, target, spots}	鼠标移至热区时触发此事件
hotspotout	{type, target, spots}	鼠标移出热区时触发此事件
tilesloaded	{type, target}	当地图所有图块完成加载时触发此事件
touchstart	{type, target, point,pixel}	触摸开始时触发此事件，仅适用移动设备
touchmove	{type, target, point,pixel}	触摸移动时触发此事件，仅适用移动设备
touchend	{type, target, point,pixel}	触摸结束时触发此事件，仅适用移动设备
longpress	{type, target, point,pixel}	长按事件，仅适用移动设备

5.3各种功能组件

可以根据需求，按需导入以下的组件

事件名	属性	描述
BaiduMap	地图盒子	Introduce Baidu map in vue
BmScale	Scale bar control	Add a scale control to the map
BmNavigation	Zoom control	Add a scale control to the map
BmMapType	Map type control	Add a scale control to the map
BmOverviewMap	Thumbnail control	Add a scale control to the map
BmGeolocation	Positioning control	Add a scale control to the map
BmCopyright	Copyright control	Add a scale control to the map
BmCityList	City selection control	Add city selection to the map
BmPanorama	Panorama control	Add a panorama to the map
BmControl	Custom control	Add customization to the map
BmMarker	Dot cover	Add a point marker in the center of the map
BmPointCollection	Massive dot covering	Add multiple point markers on the map
BmPolyline	Polyline covering	Add editable polylines to the map
BmPolygon	Polygonal covering	Add editable polygons to the map
BmCircle	Round covering	Add a circle to the map
BmGround	Ground cover	Add a ground layer to the map
BmLabel	Label cover	Add a custom text label to the map
BmInfoWindow	Information form overlay	Add an information form to the map
BmOverlay	Custom overlay	The custom cover component is a highly customized component
BmLocalSearch	Region search	Retrieve the area of ​​a map instance
BmTransit	Bus route planning	Retrieve bus route planning from AA to BB
BmWalking	Walking route planning	Retrieve the walking route plan from AA to BB
BmDriving	Driving route planning	Query the driving route planning from AA to BB
BmBus	Bus route search	Query the route of Shenzhen XX bus route
BmContextMenu	Context menu	Insert a context menu in the map
BmContextMenuItem	Menu Item	The menu item is a sub-component of the right-click menu, please do not use it in other components.
BmBoundary	Administrative divisions	Add the administrative division of Nanshan District, Shenzhen to the map
BmAutoComplete	Autofill	When entering keywords, the content will be filled in automatically