admin管理员组

文章数量:815878

vue+高德地图实现多边形范围内标点

vue+高德地图实现多边形范围内标点

  • 具体实现:
    • 一、安装并引入高德地图:
    • 二、创建一个aMap地图文件:
    • 三、aMap上创建多边形围栏:
    • 四、配置围栏、地图点击事件:
    • 五、地图点击标点事件:

本篇文章可用于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.15plugins: [] // 需要使用的的插件列表,如比例尺'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.15plugins: [] // 需要使用的的插件列表,如比例尺'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.15plugins: [] // 需要使用的的插件列表,如比例尺'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.lnglatconsole.log(lng, lat)alert(`您点击了这个位置(${lng},${lat})`)})}}

五、地图点击标点事件:

配置标点生成:

  methods: {setPolygon (AMap) {...polygon.on('click', (e) => {const { lng, lat } = e.lnglatconsole.log(lng, lat)alert(`您点击了这个位置(${lng},${lat})`)this.setMarker({ lng, lat }, AMap)})},setMarker (data, AMap) {const { lng, lat } = datathis.marker = new AMap.Marker({position: [lng, lat],draggable: false,zIndex: 200})this.map.add(this.marker)}}

显示效果如下:

以上,完毕;

本文标签: vue高德地图实现多边形范围内标点