谷歌地图3 API - 点击功能（从geojson），并检查它是否包含位置（S） [英] Google Maps 3 API - Click on feature (from geojson) and check if it contains location(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 < pre class =snippet-code-css lang-css prettyprint-override> 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 Description containsLocation(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.
proof 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）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
