Vue uses Vue Baidu Map to use select coordinates and set the range Baidu map

Official documents:

Vue Baidu Map

  Baidu Maps Open Platform: Inverse Geocoding GC | Baidu Maps API SDK

Baidu Map Example Center: Map JS API Example | Baidu Map Open Platform

 References: Baidu map JSAPI 2.0 class reference

1. Installation

$ npm install vue-baidu-map --save

Register and use in main.js

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
 
Vue.use(BaiduMap, {
  ak: '此处为百度地图申请的密钥'
})

 2. Easy to use

<template>
    <baidu-map :center="center" :zoom="zoom" :dragging="true" @ready="handler" class="map"     @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
    </baidu-map>
</template>
 
export default {
    data() {
        return {
            center: {lng: 0, lat: 0}, // 设置中心点信息
            zoom: 3, // 地图初始放大倍数
        }
    },
    methods: {
        // 创建地图
        handler({BMap, map}) {
          this.center.lng = 118.7995
          this.center.lat = 31.9663
          this.zoom = 16
        },
        
        // 拖拽地图时触发此事件
        syncCenterAndZoom(event) {
            // console.log(event);
        }
    }
}
 
 

The dragging attribute is whether dragging is allowed

3. Use custom coordinate point bm-marker

<template>
    <baidu-map :center="center" :zoom="zoom" :dragging="true" @ready="handler" class="map" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
        <bm-marker :position="markerPoint" :dragging="dragging" :raiseOnDrag="raiseOnDrag" animation="BMAP_ANIMATION_BOUNCE"  :icon="{url: pointIcon, size: {width: 30, height: 30}}">        </bm-marker>
    </baidu-map>
</template>
 
export default {
    data() {
        return {
            center: {lng: 0, lat: 0}, // 设置中心点信息
            zoom: 3, // 地图初始放大倍数
            markerPoint: {lng: 118.7995, lat: 31.9663}, // 点的位置
            dragging: true, // 是否可以拖拽点
            raiseOnDrag: true, // 拖拽时是否有动画效果
            pointIcon: require('自定义的点的图片地址')
        }
    },
    methods: {
        // 创建地图
        handler({BMap, map}) {
          this.center.lng = 118.7995
          this.center.lat = 31.9663
          this.zoom = 16
        },
        
        // 拖拽地图时触发此事件
        syncCenterAndZoom(event) {
            // console.log(event);
        }
    }
}
 

The animation attribute  point dragging effect animation BMAP_ANIMATION_BOUNCE is for the mouse to press the point to lift, release the point to drop

Preview effect:

 4. Set the range circle bm-circle

<template>
    <baidu-map :center="center" :zoom="zoom" :dragging="true" @ready="handler" class="map" @moving="syncCenterAndZoom" @moveend="syncCenterAndZoom" @zoomend="syncCenterAndZoom">
    <bm-circle :center="circlePath.center" :radius="circlePath.radius" stroke-color="#EC4141" :stroke-opacity="0.9" :stroke-weight="2" @lineupdate="updateCirclePath"></bm-circle>
    </baidu-map>
</template>
 
export default {
    data() {
        return {
            center: {lng: 0, lat: 0}, // 设置中心点信息
            zoom: 3, // 地图初始放大倍数
            circlePath: { // 圆圈范围信息
                center: {
                  lng: 118.7995,
                  lat: 31.9663
                },
                radius: 300 // 圆圈范围半径
            },
        }
    },
    methods: {
        // 创建地图
        handler({BMap, map}) {
          this.center.lng = 118.7995
          this.center.lat = 31.9663
          this.zoom = 16
        },
        
        // 拖拽地图时触发此事件
        syncCenterAndZoom(event) {
            // console.log(event);
        },
        
        // 设置圆圈范围及半径
        updateCirclePath() {
            this.circlePath.center.lng = 118.7995
            this.circlePath.center.lat = 31.9663
            this.circlePath.radius = 300
        },
    }
}

stroke-color attribute: the border color of the circle

stroke-opacity property: the transparency inside the circle

stroke-weight attribute: the width of the circle border

Preview effect: