vue+高德地图实现多边形范围内标点
本篇文章可用于vue项目使用百度地图,获取指定多边形范围内部某点的地址信息
具体实现:
1、在地图上绘制多边形;
2、点击地图绘制标点;
3、map、polygon分别绑定点击事件,实现在多边形范围内标点功能;
一、安装并引入高德地图:
npm i @amap/amap-jsapi-loader -S
在index.html页面配置高德地图秘钥;
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script>
window._AMapSecurityConfig = {
securityJsCode: '你的密钥'
}
</script>
</head>
二、创建一个aMap地图文件:
可以直接配置路由访问,也可配置成为组件用于其他页面引入;
<template>
<div id="map"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
name: 'aMap',
data () {
return {
map: null
}
},
mounted () {
this.initMap()
},
methods: {
// 初始化地图
initMap () {
AMapLoader.load({
key: '申请好的Web端开发者Key,首次调用load时必填',
version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap) => {
// 初始化地图
this.map = new AMap.Map('map', {
viewMode: '2D', // 是否为3D地图模式
zoom: 10, // 初始化地图级别
center: [117.02, 36.4], // 中心点坐标
resizeEnable: true
})
}).catch(e => {
console.log(e)
})
}
}
}
</script>
#map {
height: 800px;
width: 1200px;
margin: 30px auto;
}
显示效果如下,注意,地图容器需设置高度:
三、aMap上创建多边形围栏:
注意,围栏的path变量需要按照**[[经度(lng), 纬度(lat)]]**的格式,否则会报错
methods: {
initMap () {
AMapLoader.load({
key: 'e2fb767d055d5a1b9f623fce7e4674a9',
version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap) => {
// 初始化地图
this.map = new AMap.Map('map', {
...
})
// 调用画出围栏
this.setPolygon(AMap)
}).catch(e => {
console.log(e)
})
},
setPolygon (AMap) {
const path = [
[117.271147, 36.690903],
[117.292571, 36.692125],
[117.292611, 36.690585],
[117.271407, 36.690153]
]
const polygon = new AMap.Polygon({
path, // 设置多边形边界路径
strokeColor: '#FF33FF', // 线颜色
strokeOpacity: 0.2, // 线透明度
strokeWeight: 3, // 线宽
fillColor: '#1791fc', // 填充色
fillOpacity: 0.35 // 填充透明度
})
// 画出围栏
this.map.add(polygon)
// 自动缩放并聚焦合适中心点
this.map.setFitView([polygon])
}
}
}
显示效果如下,由于使用setFitView,此时地图展示当前围栏所在最佳位置:
四、配置围栏、地图点击事件:
为地图(map)、围栏分别配置点击事件,区别不同位置交互效果:
methods: {
initMap () {
AMapLoader.load({
key: 'e2fb767d055d5a1b9f623fce7e4674a9',
version: '2.0', // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [] // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap) => {
// 初始化地图
this.map = new AMap.Map('map', {
...
})
this.setPolygon(AMap)
this.map.on('click', (e) => {
alert('请在围栏范围中选中位置信息')
})
}).catch(e => {
console.log(e)
})
},
setPolygon (AMap) {
...
polygon.on('click', (e) => {
const { lng, lat } = e.lnglat
console.log(lng, lat)
alert(`您点击了这个位置(${lng},${lat})`)
})
}
}
五、地图点击标点事件:
配置标点生成:
methods: {
setPolygon (AMap) {
...
polygon.on('click', (e) => {
const { lng, lat } = e.lnglat
console.log(lng, lat)
alert(`您点击了这个位置(${lng},${lat})`)
this.setMarker({ lng, lat }, AMap)
})
},
setMarker (data, AMap) {
const { lng, lat } = data
this.marker = new AMap.Marker({
position: [lng, lat],
draggable: false,
zIndex: 200
})
this.map.add(this.marker)
}
}
显示效果如下:
以上,完毕;