首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在Google Map中将小多边形添加到另一个多边形中?

如何在Google Map中将小多边形添加到另一个多边形中?
EN

Stack Overflow用户
提问于 2018-06-11 07:31:32
回答 1查看 0关注 0票数 0

我有一个任务来添加一个主多边形区域,然后在Google Map中的主多边形区域上绘制子区域多边形。我无法找到合适的解决方案,有人可以分享示例代码吗?

需求快照如下:

EN

回答 1

Stack Overflow用户

发布于 2018-06-11 16:57:22

我发现解决方案可以通过Google Map绘图和加载保存的地图,通过坐标加载地图并禁用其绘图工具和编辑mod。代码在这里:

代码语言:javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100004836

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档