vue 使用 Vue Baidu Map使用 选择坐标、设置范围 百度地图

官方文件:

Vue Baidu Map

  百度地图开放平台:逆地理编码 gc | 百度地图API SDK

百度地图示例中心:地图JS API示例 | 百度地图开放平台

 参考文献:百度地图JSAPI 2.0类参考

1. 安装

$ npm install vue-baidu-map --save

在main.js注册 使用

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

 2. 简单使用

<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);
        }
    }
}
 
 

dragging属性为是否允许拖拽

3. 使用自定义坐标点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);
        }
    }
}
 

animation属性 点拖拽效果动画 BMAP_ANIMATION_BOUNCE为 鼠标按下点抬起，松开点放下

预览效果：

 4. 设置范围圆圈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属性： 圆圈的边框颜色

stroke-opacity属性：圆圈内的 透明度

stroke-weight属性：圆圈边框的宽度

预览效果：