我有一个任务来添加一个主多边形区域,然后在Google Map中的主多边形区域上绘制子区域多边形。我无法找到合适的解决方案,有人可以分享示例代码吗?
需求快照如下:
发布于 2018-06-11 16:57:22
我发现解决方案可以通过Google Map绘图和加载保存的地图,通过坐标加载地图并禁用其绘图工具和编辑mod。代码在这里:
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=PUT YOUR API KEY&libraries=drawing,geometry"></script>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
map.data.setControls(['Polygon']); // comment it while to show only maps
map.data.setStyle({
editable: true, // set it false
draggable: true // set it false
});
bindDataLayerListeners(map.data);
loadPolygons(map);
map.data.addListener('click', function(event) {
alert('Hello');
});
}
function bindDataLayerListeners(dataLayer) {
dataLayer.addListener('addfeature', savePolygon);
dataLayer.addListener('removefeature', savePolygon);
dataLayer.addListener('setgeometry', savePolygon);
}
function loadPolygons(map) {
var data = JSON.parse(localStorage.getItem('geoData'));
map.data.forEach(function (f) {
map.data.remove(f);
});
map.data.addGeoJson(data);
}
function savePolygon() {
map.data.toGeoJson(function (json) {
localStorage.setItem('geoData', JSON.stringify(json));
});
}
initMap();
</script>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
https://stackoverflow.com/questions/-100004836
复制相似问题