我有2个多边形{ "Country": "01", "Location": "09", "City": "156" }和{ "Country": "01", "Location": "09", "City": "160" }
我在地图上创建了centerMarker固定中心。当用户拖动或更改地图中心时。我将获得centerMarker的职位。
google.maps.event.addListener(map,'idle', function() {
console.log(map.getCenter().lat());
console.log(map.getCenter().lng());
});
$('<div/>').addClass('centerMarker').appendTo(map.getDiv())
如何检查位于centerMarker或"City": "160"上的"City": "156"？
我的完整代码
function initMap() {
var x = new google.maps.LatLng(11.200845,106.5746263,17);
var data =
{
"type":"FeatureCollection",
"name":"gadm36_VNM_3",
"crs":{
"type":"name",
"properties":{
"name":"urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features":[
{
"type":"Feature",
"properties":{
"Country":"01",
"Location":"09",
"City":"156"
},
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
106.773910522460994,
11.140744209289601
],
[
106.764717102050994,
11.140742301941
],
[
106.764862060547003,
11.1326341629028
],
[
106.763977050780994,
11.128930091857899
],
[
106.762413024902003,
11.1263284683228
],
[
106.761451721190994,
11.126066207885801
],
[
106.760833740234006,
11.1245851516725
],
[
106.75707244873,
11.122723579406699
],
[
106.750144958495994,
11.1217250823975
],
[
106.747901916504006,
11.122282028198301
],
[
106.748207092285,
11.1209669113159
],
[
106.746643066405994,
11.1184997558594
],
[
106.746650695800994,
11.1169691085815
],
[
106.743644714355995,
11.1138353347779
],
[
106.742393493652003,
11.1109828948975
],
[
106.737831115722997,
11.108716964721699
],
[
106.737289428710994,
11.1100120544434
],
[
106.737907409667997,
11.113375663757299
],
[
106.73681640625,
11.114133834839
],
[
106.737213134765994,
11.114882469177299
],
[
106.735412597655994,
11.116992950439499
],
[
106.735473632812997,
11.1183891296387
],
[
106.737617492675994,
11.119469642639199
],
[
106.737586975097997,
11.1202993392944
],
[
106.735694885254006,
11.120556831359901
],
[
106.736740112305,
11.1254129409791
],
[
106.735290527344006,
11.1279869079591
],
[
106.73600769043,
11.132244110107401
],
[
106.735633850097997,
11.1326360702516
],
[
106.733108520507997,
11.131629943847701
],
[
106.732345581055,
11.1364440917969
],
[
106.72779083252,
11.136043548583901
],
[
106.727645874024006,
11.138410568237299
],
[
106.724494934082003,
11.136935234069901
],
[
106.718818664550994,
11.142228126526
],
[
106.716232299805,
11.1407585144044
],
[
106.713203430175994,
11.1368913650513
],
[
106.71263885498,
11.1488819122315
],
[
106.713729858399006,
11.1516876220704
],
[
106.725151062012003,
11.180347442626999
],
[
106.734558105469006,
11.1816873550416
],
[
106.736030578612997,
11.180858612060501
],
[
106.755981445312997,
11.1822462081909
],
[
106.761962890625,
11.1883802413941
],
[
106.762916564942003,
11.1905174255372
],
[
106.764389038085994,
11.189139366149799
],
[
106.76416015625,
11.188378334045501
],
[
106.790100097655994,
11.1885118484497
],
[
106.792953491210994,
11.192991256713899
],
[
106.794372558594006,
11.1930904388429
],
[
106.794372558594006,
11.193788528442299
],
[
106.796928405762003,
11.1949625015259
],
[
106.798072814940994,
11.194272994995099
],
[
106.803909301757997,
11.1985483169556
],
[
106.805290222167997,
11.198659896850501
],
[
106.811401367187003,
11.202071189880501
],
[
106.813606262207003,
11.205387115478599
],
[
106.818145751952997,
11.2080841064453
],
[
106.819854736327997,
11.2152719497682
],
[
106.823463439940994,
11.2161722183228
],
[
106.824119567870994,
11.213012695312401
],
[
106.828521728515994,
11.209532737731999
],
[
106.831550598145,
11.209297180175801
],
[
106.835960388184006,
11.2118206024169
],
[
106.835075378417997,
11.2105274200441
],
[
106.837257385254006,
11.2098264694213
],
[
106.83716583252,
11.2090320587159
],
[
106.836235046387003,
11.2091836929322
],
[
106.837463378905994,
11.207406044006399
],
[
106.836402893065994,
11.2071533203125
],
[
106.835906982422003,
11.2056436538696
],
[
106.836585998535,
11.204249382019199
],
[
106.837699890137003,
11.2045288085938
],
[
106.836631774902003,
11.2030754089356
],
[
106.837547302245994,
11.2036037445068
],
[
106.838134765625,
11.201634407043599
],
[
106.837783813477003,
11.199815750122101
],
[
106.836570739745994,
11.1994781494141
],
[
106.83723449707,
11.1985836029053
],
[
106.835731506347997,
11.197198867798001
],
[
106.835334777832003,
11.1953115463257
],
[
106.831237792969006,
11.193099975586
],
[
106.824752807617003,
11.196343421936101
],
[
106.821243286132997,
11.195686340331999
],
[
106.818969726562997,
11.19251537323
],
[
106.81795501709,
11.192292213439901
],
[
106.817756652832003,
11.190671920776399
],
[
106.81111907959,
11.1809148788453
],
[
106.811645507812003,
11.178315162658601
],
[
106.809783935547003,
11.1756134033203
],
[
106.809677124022997,
11.174137115478599
],
[
106.807357788085994,
11.1731281280518
],
[
106.805305480957003,
11.169690132141101
],
[
106.800598144530994,
11.1647386550903
],
[
106.791679382324006,
11.1622724533082
],
[
106.787879943847997,
11.163525581359799
],
[
106.778388977050994,
11.1562852859497
],
[
106.773651123047003,
11.155713081359799
],
[
106.773910522460994,
11.140744209289601
]
]
]
]
}
},
{
"type":"Feature",
"properties":{
"Country":"01",
"Location":"09",
"City":"160"
},
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
106.908004760742003,
11.129010200500399
],
[
106.903732299805,
11.125083923339799
],
[
106.887130737305,
11.1172142028809
],
[
106.882217407227003,
11.1076774597168
],
[
106.880096435547003,
11.101813316345201
],
[
106.87996673584,
11.0955753326416
],
[
106.876556396484006,
11.095563888549901
],
[
106.876106262207003,
11.093448638916099
],
[
106.87442779541,
11.0930519104004
],
[
106.870147705077997,
11.093951225280801
],
[
106.866645812987997,
11.093237876892101
],
[
106.860298156737997,
11.0947256088256
],
[
106.858062744140994,
11.0945234298707
],
[
106.856292724609006,
11.0934009552003
],
[
106.853942871094006,
11.0938158035279
],
[
106.850006103515994,
11.092667579650801
],
[
106.848297119140994,
11.0912990570068
],
[
106.845809936522997,
11.091200828552299
],
[
106.842636108399006,
11.0886402130128
],
[
106.839897155762003,
11.0885286331178
],
[
106.836471557617003,
11.086883544921999
],
[
106.833183288574006,
11.087131500244199
],
[
106.828132629395,
11.088861465454199
],
[
106.825546264647997,
11.0915222167969
],
[
106.823066711425994,
11.0958919525146
],
[
106.823875427245994,
11.1021842956544
],
[
106.822807312012003,
11.107276916504
],
[
106.822982788085994,
11.1099071502687
],
[
106.821441650390994,
11.1121578216553
],
[
106.821563720702997,
11.1142129898072
],
[
106.829162597655994,
11.1119136810303
],
[
106.856956481934006,
11.1134729385375
],
[
106.856575012207003,
11.116441726684601
],
[
106.858283996582003,
11.1262016296387
],
[
106.864997863769005,
11.1320905685425
],
[
106.871109008789006,
11.1428709030153
],
[
106.878143310547003,
11.143126487731999
],
[
106.880805969237997,
11.144726753234901
],
[
106.886619567870994,
11.1450748443604
],
[
106.889801025390994,
11.1470909118653
],
[
106.892097473145,
11.1469631195068
],
[
106.896003723145,
11.145208358764799
],
[
106.89820098877,
11.143099784851101
],
[
106.898323059082003,
11.1416568756104
],
[
106.900520324707003,
11.138403892516999
],
[
106.900169372559006,
11.1379747390747
],
[
106.901206970215,
11.137484550476101
],
[
106.900978088379006,
11.136289596557599
],
[
106.902084350585994,
11.135934829711999
],
[
106.902717590332003,
11.1330337524415
],
[
106.904357910155994,
11.1320133209229
],
[
106.905548095702997,
11.129722595214799
],
[
106.907104492187997,
11.1286296844484
],
[
106.908004760742003,
11.129010200500399
]
]
]
]
}
}
]
};
var map = new google.maps.Map(document.getElementById("map"),{
center: x,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map,'idle', function() {
console.log(map.getCenter().lat());
console.log(map.getCenter().lng());
});
$('<div/>').addClass('centerMarker').appendTo(map.getDiv())
map.data.addGeoJson(data);
}
答案 0 :(得分：1)
为了弄清楚地图的中心是否位于城市的多边形内，可以使用Maps JavaScript API的几何库。几何库提供了方法containsLocation(point, polygon)，这可能对您有用。看看文档
https://developers.google.com/maps/documentation/javascript/reference/geometry#poly
首先，您必须在载入了Maps JavaScript API的script标签中包括几何图形库，并在Maps JavaScript API的URL中添加&libraries=geometry。其次，您使用数据层的GeoJSON对象创建城市的多边形，因此必须将数据层的多面体转换为google.maps.Polygons对象，才能使用上述方法containsLocation(point, polygon)。
我建议调查文档以了解如何转换这些对象
https://developers.google.com/maps/documentation/javascript/reference/data#Data.MultiPolygon
这里是一个示例代码，该示例代码转换了Multipolygons，并使用containsLocation(point, polygon)检查地图中心是否在城市多边形内
var map;
function initMap() {
var x = new google.maps.LatLng(11.200845,106.5746263,17);
var data =
{
"type":"FeatureCollection",
"name":"gadm36_VNM_3",
"crs":{
"type":"name",
"properties":{
"name":"urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features":[
{
"type":"Feature",
"properties":{
"Country":"01",
"Location":"09",
"City":"156"
},
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
106.773910522460994,
11.140744209289601
],
[
106.764717102050994,
11.140742301941
],
[
106.764862060547003,
11.1326341629028
],
[
106.763977050780994,
11.128930091857899
],
[
106.762413024902003,
11.1263284683228
],
[
106.761451721190994,
11.126066207885801
],
[
106.760833740234006,
11.1245851516725
],
[
106.75707244873,
11.122723579406699
],
[
106.750144958495994,
11.1217250823975
],
[
106.747901916504006,
11.122282028198301
],
[
106.748207092285,
11.1209669113159
],
[
106.746643066405994,
11.1184997558594
],
[
106.746650695800994,
11.1169691085815
],
[
106.743644714355995,
11.1138353347779
],
[
106.742393493652003,
11.1109828948975
],
[
106.737831115722997,
11.108716964721699
],
[
106.737289428710994,
11.1100120544434
],
[
106.737907409667997,
11.113375663757299
],
[
106.73681640625,
11.114133834839
],
[
106.737213134765994,
11.114882469177299
],
[
106.735412597655994,
11.116992950439499
],
[
106.735473632812997,
11.1183891296387
],
[
106.737617492675994,
11.119469642639199
],
[
106.737586975097997,
11.1202993392944
],
[
106.735694885254006,
11.120556831359901
],
[
106.736740112305,
11.1254129409791
],
[
106.735290527344006,
11.1279869079591
],
[
106.73600769043,
11.132244110107401
],
[
106.735633850097997,
11.1326360702516
],
[
106.733108520507997,
11.131629943847701
],
[
106.732345581055,
11.1364440917969
],
[
106.72779083252,
11.136043548583901
],
[
106.727645874024006,
11.138410568237299
],
[
106.724494934082003,
11.136935234069901
],
[
106.718818664550994,
11.142228126526
],
[
106.716232299805,
11.1407585144044
],
[
106.713203430175994,
11.1368913650513
],
[
106.71263885498,
11.1488819122315
],
[
106.713729858399006,
11.1516876220704
],
[
106.725151062012003,
11.180347442626999
],
[
106.734558105469006,
11.1816873550416
],
[
106.736030578612997,
11.180858612060501
],
[
106.755981445312997,
11.1822462081909
],
[
106.761962890625,
11.1883802413941
],
[
106.762916564942003,
11.1905174255372
],
[
106.764389038085994,
11.189139366149799
],
[
106.76416015625,
11.188378334045501
],
[
106.790100097655994,
11.1885118484497
],
[
106.792953491210994,
11.192991256713899
],
[
106.794372558594006,
11.1930904388429
],
[
106.794372558594006,
11.193788528442299
],
[
106.796928405762003,
11.1949625015259
],
[
106.798072814940994,
11.194272994995099
],
[
106.803909301757997,
11.1985483169556
],
[
106.805290222167997,
11.198659896850501
],
[
106.811401367187003,
11.202071189880501
],
[
106.813606262207003,
11.205387115478599
],
[
106.818145751952997,
11.2080841064453
],
[
106.819854736327997,
11.2152719497682
],
[
106.823463439940994,
11.2161722183228
],
[
106.824119567870994,
11.213012695312401
],
[
106.828521728515994,
11.209532737731999
],
[
106.831550598145,
11.209297180175801
],
[
106.835960388184006,
11.2118206024169
],
[
106.835075378417997,
11.2105274200441
],
[
106.837257385254006,
11.2098264694213
],
[
106.83716583252,
11.2090320587159
],
[
106.836235046387003,
11.2091836929322
],
[
106.837463378905994,
11.207406044006399
],
[
106.836402893065994,
11.2071533203125
],
[
106.835906982422003,
11.2056436538696
],
[
106.836585998535,
11.204249382019199
],
[
106.837699890137003,
11.2045288085938
],
[
106.836631774902003,
11.2030754089356
],
[
106.837547302245994,
11.2036037445068
],
[
106.838134765625,
11.201634407043599
],
[
106.837783813477003,
11.199815750122101
],
[
106.836570739745994,
11.1994781494141
],
[
106.83723449707,
11.1985836029053
],
[
106.835731506347997,
11.197198867798001
],
[
106.835334777832003,
11.1953115463257
],
[
106.831237792969006,
11.193099975586
],
[
106.824752807617003,
11.196343421936101
],
[
106.821243286132997,
11.195686340331999
],
[
106.818969726562997,
11.19251537323
],
[
106.81795501709,
11.192292213439901
],
[
106.817756652832003,
11.190671920776399
],
[
106.81111907959,
11.1809148788453
],
[
106.811645507812003,
11.178315162658601
],
[
106.809783935547003,
11.1756134033203
],
[
106.809677124022997,
11.174137115478599
],
[
106.807357788085994,
11.1731281280518
],
[
106.805305480957003,
11.169690132141101
],
[
106.800598144530994,
11.1647386550903
],
[
106.791679382324006,
11.1622724533082
],
[
106.787879943847997,
11.163525581359799
],
[
106.778388977050994,
11.1562852859497
],
[
106.773651123047003,
11.155713081359799
],
[
106.773910522460994,
11.140744209289601
]
]
]
]
}
},
{
"type":"Feature",
"properties":{
"Country":"01",
"Location":"09",
"City":"160"
},
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
106.908004760742003,
11.129010200500399
],
[
106.903732299805,
11.125083923339799
],
[
106.887130737305,
11.1172142028809
],
[
106.882217407227003,
11.1076774597168
],
[
106.880096435547003,
11.101813316345201
],
[
106.87996673584,
11.0955753326416
],
[
106.876556396484006,
11.095563888549901
],
[
106.876106262207003,
11.093448638916099
],
[
106.87442779541,
11.0930519104004
],
[
106.870147705077997,
11.093951225280801
],
[
106.866645812987997,
11.093237876892101
],
[
106.860298156737997,
11.0947256088256
],
[
106.858062744140994,
11.0945234298707
],
[
106.856292724609006,
11.0934009552003
],
[
106.853942871094006,
11.0938158035279
],
[
106.850006103515994,
11.092667579650801
],
[
106.848297119140994,
11.0912990570068
],
[
106.845809936522997,
11.091200828552299
],
[
106.842636108399006,
11.0886402130128
],
[
106.839897155762003,
11.0885286331178
],
[
106.836471557617003,
11.086883544921999
],
[
106.833183288574006,
11.087131500244199
],
[
106.828132629395,
11.088861465454199
],
[
106.825546264647997,
11.0915222167969
],
[
106.823066711425994,
11.0958919525146
],
[
106.823875427245994,
11.1021842956544
],
[
106.822807312012003,
11.107276916504
],
[
106.822982788085994,
11.1099071502687
],
[
106.821441650390994,
11.1121578216553
],
[
106.821563720702997,
11.1142129898072
],
[
106.829162597655994,
11.1119136810303
],
[
106.856956481934006,
11.1134729385375
],
[
106.856575012207003,
11.116441726684601
],
[
106.858283996582003,
11.1262016296387
],
[
106.864997863769005,
11.1320905685425
],
[
106.871109008789006,
11.1428709030153
],
[
106.878143310547003,
11.143126487731999
],
[
106.880805969237997,
11.144726753234901
],
[
106.886619567870994,
11.1450748443604
],
[
106.889801025390994,
11.1470909118653
],
[
106.892097473145,
11.1469631195068
],
[
106.896003723145,
11.145208358764799
],
[
106.89820098877,
11.143099784851101
],
[
106.898323059082003,
11.1416568756104
],
[
106.900520324707003,
11.138403892516999
],
[
106.900169372559006,
11.1379747390747
],
[
106.901206970215,
11.137484550476101
],
[
106.900978088379006,
11.136289596557599
],
[
106.902084350585994,
11.135934829711999
],
[
106.902717590332003,
11.1330337524415
],
[
106.904357910155994,
11.1320133209229
],
[
106.905548095702997,
11.129722595214799
],
[
106.907104492187997,
11.1286296844484
],
[
106.908004760742003,
11.129010200500399
]
]
]
]
}
}
]
};
map = new google.maps.Map(document.getElementById("map"),{
center: x,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var centerMarker = new google.maps.Marker({
position: x,
map: map
});
var features = map.data.addGeoJson(data);
var mapPolies = new Map();
features.forEach(function(feature) {
var city = feature.getProperty("City");
var geom = feature.getGeometry();
var polygons = geom.getArray();
var polys = [];
polygons.forEach(function(polygon) {
var paths = [];
var linearRings = polygon.getArray();
linearRings.forEach(function(linearRing){
var coords = linearRing.getArray();
paths.push(coords);
});
var poly = new google.maps.Polygon({
paths: paths,
map: null,
visible: false
});
polys.push(poly);
});
mapPolies.set(city, polys);
});
google.maps.event.addListener(map,'idle', function() {
//console.log(map.getCenter().lat());
//console.log(map.getCenter().lng());
centerMarker.setPosition(map.getCenter());
for (var entry of mapPolies.entries()) {
entry[1].forEach(function(polygon) {
var inside = google.maps.geometry.poly.containsLocation(map.getCenter(), polygon);
if (inside) {
console.log(`Map center inside polygon of ${entry[0]} city`);
}
});
}
});
}#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap&libraries=geometry" async defer></script>
我希望这会有所帮助！