谷歌地图3 API - 点击功能（从geojson），并检查它是否包含位置（S）

本文介绍了谷歌地图3 API - 点击功能（从geojson），并检查它是否包含位置（S）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我在地图上成功加载了一个geojson文件。我可以点击每个多边形来改变笔画并访问它的属性。但是我想知道每个多边形中是否有某些点。 我已经对正常的多边形使用了google.maps.geometry.poly.containsLocation（）。有没有办法从event.feature.getGeometry（）提取多边形...用于containsLocation或其他方法来检查这个？ map.data.loadGeoJson（ 'INC-tracts.json'）; var featureStyle = { strokeColor：'＃000000'， strokeOpacity：0.5， strokeWeight：3，} map.data.setStyle featureStyle）; map.data.addListener（'click'，function（event）{ console.log（event.feature.getProperty（CTNAME））; //这是我想要的地方检查点是否属于它 解决方案 div> google.maps.data.Polygon 不是 google.maps.Polygon 。 google.maps.geometry.poly.containsLocation 方法，需要两个论证： 方法返回值描述 containsLocation（point：LatLng，polygon：Polygon）boolean计算给定点是否位于指定的多边形内。 谷歌。 maps.LatLng对象和一个google.maps.Polygon（不是google.maps.data.Polygon）。您需要从google.maps.data.Polygon中的数据创建一个google.maps.Polygon以使用该函数。 工作小提琴 概念验证码片段： function initialize（）{//创建一个简单的地图。 features = []; map = new google.maps.Map（document.getElementById（'map-canvas'），{zoom：4，center：{lat：-28，lng：137.883}}）; var markers = [[31.713127,3.206804]，[31.712762,35.22028]，[31.706117,35.210753]，[31.717216,35.210066]，[31.701152,35.188265]，[31.704073,35.19144]]; var gmarkers = []; var info = new google.maps.InfoWindow（）; for（var i = 0; i html，body {height：100％; margin：0px; padding：0px; width：100％;}＃map-canvas {height：100％; width：100％;} < script src = https://maps.googleapis.com/maps/api/js\"></script><div id ='info'>< / div>< div id =map-canvas> < / div> I have loaded a geojson file successfully on my map. I am able to click each polygon to change stroke and access its properties. But I want to find out if certain points are within each multipolygon.I have used google.maps.geometry.poly.containsLocation() for normal polygons. Is there either a way to extract the polygon from event.feature.getGeometry()... to use in containsLocation or another method to check for this?map.data.loadGeoJson('inc-tracts.json');var featureStyle = { strokeColor: '#000000', strokeOpacity: 0.5, strokeWeight: 3,}map.data.setStyle(featureStyle);map.data.addListener('click', function(event) { console.log(event.feature.getProperty("CTNAME")); // This is where I want to check if point(s) fall within it.} 解决方案 A google.maps.data.Polygon is not a google.maps.Polygon. The google.maps.geometry.poly.containsLocation method, takes two arguements:Methods Return Value DescriptioncontainsLocation(point:LatLng, polygon:Polygon) boolean Computes whether the given point lies inside the specified polygon.A google.maps.LatLng object and a google.maps.Polygon (not a google.maps.data.Polygon). You need to create a google.maps.Polygon from the data in the google.maps.data.Polygon to use that function.working fiddleproof of concept code snippet:function initialize() { // Create a simple map. features = []; map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 4, center: { lat: -28, lng: 137.883 } }); var markers = [ [31.713127, 35.206804], [31.712762, 35.22028], [31.706117, 35.210753], [31.717216, 35.210066], [31.701152, 35.188265], [31.704073, 35.19144] ]; var gmarkers = []; var info = new google.maps.InfoWindow(); for (var i = 0; i < markers.length; i++) { gmarkers.push(new google.maps.Marker({ position: { lat: markers[i][0], lng: markers[i][1] }, draggable: true, map: map })); google.maps.event.addListener(gmarkers[gmarkers.length - 1], 'click', function() { info.setContent(this.getPosition().toUrlValue(6)); info.open(map, this); }); } google.maps.event.addListener(map, 'click', function(e) { document.getElementById('info').innerHTML += e.latLng.toUrlValue(6) + "<br>"; }) google.maps.event.addListener(map, 'click', function() { info.close(); }); // process the loaded GeoJSON data. var bounds = new google.maps.LatLngBounds(); google.maps.event.addListener(map.data, 'addfeature', function(e) { if (e.feature.getGeometry().getType() === 'Polygon') { var polys = e.feature.getGeometry().getArray(); for (var i = 0; i < polys.length; i++) { for (var j = 0; j < polys[i].getLength(); j++) { bounds.extend(polys[i].getAt(j)); } } map.fitBounds(bounds); } }); map.data.addGeoJson(data); map.data.addListener('click', function(event) { if (event.feature.getGeometry().getType() === 'Polygon') { var polyPath = event.feature.getGeometry().getAt(0).getArray(); var poly = new google.maps.Polygon({ paths: polyPath }); for (var i = 0; i < gmarkers.length; i++) { if (google.maps.geometry.poly.containsLocation(gmarkers[i].getPosition(), poly)) { gmarkers[i].setIcon("http://maps.google.com/mapfiles/ms/icons/blue.png"); } else { gmarkers[i].setIcon(""); } } }; });}google.maps.event.addDomListener(window, 'load', initialize);var data = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "name": "test", "desc": "test desc", "inDailyProgram": true, "color": "red" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 35.188327, 31.699929, 0 ], [ 35.187895, 31.699669, 0 ], [ 35.187014, 31.699729, 0 ], [ 35.186867, 31.700016, 0 ], [ 35.186783, 31.700395, 0 ], [ 35.186921, 31.700787, 0 ], [ 35.187232, 31.701291, 0 ], [ 35.18763, 31.701844, 0 ], [ 35.187442, 31.702328, 0 ], [ 35.18692, 31.702779, 0 ], [ 35.187064, 31.703654, 0 ], [ 35.187433, 31.703794, 0 ], [ 35.188155, 31.70344, 0 ], [ 35.188921, 31.702917, 0 ], [ 35.189348, 31.702887, 0 ], [ 35.189828, 31.70302, 0 ], [ 35.190313, 31.703443, 0 ], [ 35.190359, 31.704104, 0 ], [ 35.190224, 31.704348, 0 ], [ 35.189797, 31.704585, 0 ], [ 35.189753, 31.704948, 0 ], [ 35.189847, 31.705107, 0 ], [ 35.190187, 31.705015, 0 ], [ 35.190604, 31.705041, 0 ], [ 35.190931, 31.705171, 0 ], [ 35.191435, 31.70526, 0 ], [ 35.191861, 31.705231, 0 ], [ 35.192482, 31.705008, 0 ], [ 35.192945, 31.704893, 0 ], [ 35.193564, 31.704449, 0 ], [ 35.192869, 31.704004, 0 ], [ 35.192256, 31.703737, 0 ], [ 35.191754, 31.703371, 0 ], [ 35.191306, 31.703001, 0 ], [ 35.190838, 31.702632, 0 ], [ 35.190546, 31.70221, 0 ], [ 35.190348, 31.701739, 0 ], [ 35.190323, 31.701589, 0 ], [ 35.189814, 31.701624, 0 ], [ 35.189443, 31.701456, 0 ], [ 35.189108, 31.701217, 0 ], [ 35.188509, 31.700359, 0 ], [ 35.188327, 31.699929, 0 ] ] ] } }, { "type": "Feature", "properties": { "name": "test", "desc": "test desc", "inDailyProgram": true, "color": "red" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 35.209224, 31.718497, 0 ], [ 35.209775, 31.718459, 0 ], [ 35.210282, 31.717788, 0 ], [ 35.210741, 31.71723, 0 ], [ 35.21132, 31.716803, 0 ], [ 35.211748, 31.716193, 0 ], [ 35.212124, 31.715632, 0 ], [ 35.212315, 31.714798, 0 ], [ 35.21227, 31.714137, 0 ], [ 35.212647, 31.713599, 0 ], [ 35.21316, 31.713412, 0 ], [ 35.214134, 31.713095, 0 ], [ 35.215018, 31.712675, 0 ], [ 35.215822, 31.7119, 0 ], [ 35.21577, 31.711156, 0 ], [ 35.215564, 31.710175, 0 ], [ 35.215104, 31.709128, 0 ], [ 35.21473, 31.708518, 0 ], [ 35.214301, 31.707911, 0 ], [ 35.214086, 31.707207, 0 ], [ 35.213709, 31.706154, 0 ], [ 35.213519, 31.705807, 0 ], [ 35.212415, 31.705441, 0 ], [ 35.211313, 31.705103, 0 ], [ 35.210114, 31.704964, 0 ], [ 35.20915, 31.705031, 0 ], [ 35.208402, 31.704612, 0 ], [ 35.207939, 31.704119, 0 ], [ 35.207657, 31.704636, 0 ], [ 35.207123, 31.704922, 0 ], [ 35.206421, 31.705164, 0 ], [ 35.205969, 31.70529, 0 ], [ 35.205926, 31.705613, 0 ], [ 35.205553, 31.705808, 0 ], [ 35.205577, 31.706157, 0 ], [ 35.205694, 31.706459, 0 ], [ 35.205902, 31.70686, 0 ], [ 35.206285, 31.707193, 0 ], [ 35.206113, 31.707375, 0 ], [ 35.206005, 31.707544, 0 ], [ 35.206139, 31.707746, 0 ], [ 35.206713, 31.708194, 0 ], [ 35.207228, 31.708428, 0 ], [ 35.207474, 31.708798, 0 ], [ 35.207463, 31.709435, 0 ], [ 35.207359, 31.709878, 0 ], [ 35.207255, 31.710418, 0 ], [ 35.207232, 31.71089, 0 ], [ 35.20712, 31.711257, 0 ], [ 35.206802, 31.711473, 0 ], [ 35.206408, 31.711645, 0 ], [ 35.206061, 31.711753, 0 ], [ 35.205639, 31.711857, 0 ], [ 35.205398, 31.711766, 0 ], [ 35.205213, 31.711698, 0 ], [ 35.205289, 31.711992, 0 ], [ 35.205266, 31.712464, 0 ], [ 35.205096, 31.712808, 0 ], [ 35.204885, 31.713348, 0 ], [ 35.204829, 31.71414, 0 ], [ 35.204947, 31.714644, 0 ], [ 35.205089, 31.715104, 0 ], [ 35.205489, 31.715687, 0 ], [ 35.205906, 31.716113, 0 ], [ 35.206464, 31.716586, 0 ], [ 35.20684, 31.716421, 0 ], [ 35.207254, 31.716005, 0 ], [ 35.207524, 31.715517, 0 ], [ 35.207901, 31.714965, 0 ], [ 35.207949, 31.714464, 0 ], [ 35.208022, 31.713919, 0 ], [ 35.20835, 31.713855, 0 ], [ 35.208542, 31.714229, 0 ], [ 35.208847, 31.71465, 0 ], [ 35.209151, 31.715044, 0 ], [ 35.20929, 31.71545, 0 ], [ 35.209362, 31.715694, 0 ], [ 35.209315, 31.716214, 0 ], [ 35.209177, 31.716619, 0 ], [ 35.209031, 31.716906, 0 ], [ 35.208958, 31.717132, 0 ], [ 35.208853, 31.717333, 0 ], [ 35.208878, 31.717691, 0 ], [ 35.209224, 31.718497, 0 ] ] ] } }]};html,body { height: 100%; margin: 0px; padding: 0px; width: 100%;}#map-canvas { height: 100%; width: 100%;}<script src="https://maps.googleapis.com/maps/api/js"></script><div id='info'></div><div id="map-canvas"></div> 这篇关于谷歌地图3 API - 点击功能（从geojson），并检查它是否包含位置（S）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！