Google Map-獲取標記的位置
[英]Google Map - Get location of marker
問題描述
我有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())
如何查看位於"City": "160"或"City": "156"上的centerMarker ？
我的完整代碼
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);
}
1 個解決方案
解決方案1
1 已采納 2019-05-05 14:08:35
為了弄清楚地圖的中心是否位於城市的多邊形內，您可以使用Maps JavaScript API的幾何庫。 幾何庫提供了方法containsLocation(point, polygon) ，它可能對您有用。 看一下文檔
https://developers.google.com/maps/documentation/javascript/reference/geometry#poly
首先，您必須在加載了Maps JavaScript API的腳本標簽中包含幾何圖形庫，並在Maps JavaScript API的URL中添加&libraries=geometry 。 其次，您使用數據層的GeoJSON對象創建城市的多邊形，因此必須將數據層的containsLocation(point, polygon)轉換為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>
我希望這有幫助！
如何在Google地圖上將標記的像素位置映射到經度和緯度
[英]How to map the pixel location of a marker on Google Map to Latitude and Longitude
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.