添加多边形

您所在的位置：网站首页 › 如何在高德地图添加定位功能 › 添加多边形

添加多边形

#添加多边形| 来源: 网络整理| 查看: 265

亲手试一试

下载完整代码

多边形矢量图Polygon，是地图覆盖物重要的地图要素，可以用来突出标记某个区域的形状。矢量图覆盖物种类繁多，使用者可以根据自己实际需求来选择合适的类型。查看更多矢量图。

本章将讲述如何在地图图面上添加一个可交互的多边形。

准备成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

添加矢量多边形Polygon1创建地图const map = new AMap.Map('container', { center: [121.045332, 31.19884], zoom: 8.8 });2创建Polygon对象

AMap.Polygon对象为用户提供在地图图面绘制多边形的能力。可以为多边形设置填充颜色fillColor、描边颜色strokeColor、轮廓线样式等属性。

const pathArr = [ [ [ [121.7789, 31.3102], [121.7279, 31.3548], [121.5723, 31.4361], [121.5093, 31.4898], [121.5624, 31.4864], [121.5856, 31.4547], [121.7694, 31.3907], [121.796, 31.3456], [121.7789, 31.3102], ], ], ]; const polygon = new AMap.Polygon({ path: pathArr, fillColor: '#ccebc5', // 多边形填充颜色 strokeOpacity: 1, // 线条透明度 fillOpacity: 0.5, //填充透明度 strokeColor: '#2b8cbe', // 线条颜色 strokeWeight: 1, //线条宽度 strokeStyle: 'dashed', // 线样式 strokeDasharray: [5, 5], //轮廓的虚线和间隙的样式 }); 提示

path 是多边形轮廓线的节点坐标数组。

支持单个普通多边形({Array })，单个带孔多边形({Array})，多个带孔多边形({Array})

3添加Polygon实例的事件

给示例中的Polygon实例添加mouseover，mouseout事件。

polygon.on('mouseover', () => { // 鼠标移入更改样式 polygon.setOptions({ fillOpacity: 0.7, fillColor: '#7bccc4' }) }) polygon.on('mouseout', () => { // 鼠标移出恢复样式 polygon.setOptions({ fillOpacity: 0.5, fillColor: '#ccebc5' }) })4添加Polygon实例至地图map.add(polygon)

【本文地址】

添加多边形

添加多边形

今日新闻

推荐新闻