在使用高德地图卫星图，由于默认使用了 v1.4.15版本，导致3D罗盘无法靠左，切换成v2.0版的，又导致网格鼠标高亮和单击事件失效。经过和官方版本的多次比较，经验如下：
高德地图版本
- v1.4.15
<script src="https://webapi.amap.com/maps?v=1.4.15&key=ca11d9894383ee611ed5c6696**"></script>
- v2.0
<script src="https://webapi.amap.com/maps?v=2.0&key=ca11d9894383ee611ed5c6696e1df**"></script>
//ajax对接数据库接口标准数据; var data = [ { name: "网格A", lnglat: "121.546266,29.80975;121.54543,29.806845;121.548713,29.806752;121.549957,29.809508" }, { name: "网格B", lnglat: "121.550105,29.809447;121.550082,29.809297;121.549287,29.806895;121.549081,29.806638;121.552093,29.806277;121.552823,29.809133" }, { name: "网格C", lnglat: "121.547453,29.80072;121.547919,29.80024;121.552966,29.799516;121.554676,29.805661;121.549011,29.806204" }, { name: "网格D", lnglat: "121.553224,29.799561;121.554952,29.805673;121.559322,29.804624;121.55722,29.799169;121.556983,29.798981;121.556405,29.798981;121.555282,29.799298" } ]
网格区域划分
//网格区域划分; for (var i = 0; i < data.length; i++) { var p = data[i].lnglat.split(";") var path = []; for (var n = 0; n < p.length; n++) { path.push([Number(p[n].split(",")[0]), Number(p[n].split(",")[1])]) } //多边形覆盖物加载; getPolygon(path, i); }
划分多边形
//划分多边形; function getPolygon(path, m) { var polygon = new AMap.Polygon({ path: path, strokeColor: colors[m], strokeWeight: 2, strokeStyle: 'dashed', strokeOpacity: 1, fillOpacity: 0.5, cursor: 'pointer', fillColor: colors[m], zIndex: 9999, }) polygon.on('mouseover', () => { polygon.setOptions({ fillOpacity: 0.7, }) }) polygon.on('mouseout', () => { polygon.setOptions({ fillOpacity: 0.5, fillColor: colors[m] }) }) polygon.on('click', () => { console.log(data[m].name) }) map.add(polygon) // 缩放地图到合适的视野级别 //map.setFitView(polygon) }
关键点
[Number(p[n].split(",")[0]), Number(p[n].split(",")[1])]
必须将经纬度坐标转化为数字类型，如果是文本类型，则鼠标事件失效。
@lockdata.cn
