直接上代码实现
- 在 vue的工程 public/index.html引入代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' https://* 'unsafe-inline'; worker-src 'self' https://* http://* 'unsafe-inline'; script-src 'self' https://* 'unsafe-inline' 'unsafe-eval'" />
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=申请的百度ak"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的百度ak"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的百度ak&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="application/javascript">
</script>
<title><%= webpackConfig.name %></title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
切记一定要百度地图的控制台申请的权限为JavaScript的使用权限才可以调用。
- 在vue.config.js中配置百度地图的插件，在module.exports中的configureWebpack配置插件功能，代码如下：
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
externals: {
BMap: 'window.BMap',
BMapLib: 'window.BMapLib'
}
},
- 在页面调用百度地图的鼠标绘制功能，
<template>
<div id="app">
<div id="container" style="width: 100%;min-height: 900px" />
</div>
</template>
<script>
import BMap from 'BMap'
import BMapLib from 'BMapLib'
export default {
name: 'OppoMap',
data() {
return {
map: '',
point_addr: '',
drawer: false,
distance: 0,
overlays: [],
coordinate: []
}
},
mounted() {
this.init()
},
methods: {
init() {
this.map = new BMap.Map('container')
var poi = new BMap.Point(118.800122, 32.064407)
this.map.centerAndZoom(poi, 15)
this.map.enableScrollWheelZoom()
var styleOptions = {
strokeColor: 'red', // 边线颜色。
fillColor: 'red', // 填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, // 边线的宽度，以像素为单位。
strokeOpacity: 0.8, // 边线透明度，取值范围0 - 1。
fillOpacity: 0.6, // 填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' // 边线的样式，solid或dashed。
}
// 实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(this.map, {
isOpen: false, // 是否开启绘制模式
enableSorption: true, // 是否开启边界吸附功能
enableDrawingTool: true, // 是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置
offset: new BMap.Size(5, 5), // 偏离值
drawingModes: [
BMAP_DRAWING_CIRCLE
]
},
circleOptions: styleOptions // 圆的样式
})
var circlecomplete = function(e) {
drawingManager.close()
}
// 添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener('circlecomplete', circlecomplete)
drawingManager.addEventListener('overlaycomplete', this.overlaycomplete)
},
overlaycomplete(e) {
console.log(e)
const distance = BMapLib.GeoUtils.getDistance(e.overlay.point, e.overlay.ja[0])
if (distance === 0 || distance === null || distance === undefined) {
return
}
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.clearAll()
this.overlays = []
this.coordinate = []
var myGeo = new BMap.Geocoder({ extensions_town: true })
const _this = this
myGeo.getLocation(new BMap.Point(e.overlay.point.lng, e.overlay.point.lat), function(result) {
if (result) {
_this.point_addr = result.address
}
})
this.distance = distance
this.overlays.push(e.overlay)
},
clearAll() {
for (let i = 0; i < this.overlays.length; i++) {
this.map.removeOverlay(this.overlays[i])
}
this.overlays = []
this.coordinate = []
}
}
}
</script>
上述代码直接复制就可以使用，overlaycomplete是监听在鼠标绘制完成时调用。可以在画图完成后调用自己的业务代码。
- 代码中也包含了如何使用百度地图GeoUtils工具，这个工具可以判断点是否在所画的图形之内，具体使用方法可以参考链接： http://api.map.baidu.com/library/GeoUtils/1.2/docs/symbols/BMapLib.GeoUtils.html
