谷歌地图：通过地理编码器将地址转换为坐标后获取方向
[英]Google Maps: getting directions after converting address to coordinates through geocoder
问题描述
I got the Google Maps to work with Local Context thanks to an answer from @eocodezip but having trouble enabling directions from the nearby locations that popped up. 
多亏了@eocodezip的回答，我让 Google 地图可以与 Local Context 一起使用，但是在启用弹出的附近位置的方向时遇到了问题。
Here's the code I'm using.这是我正在使用的代码。 It seems like "directionsOptions: { origin: center }" runs too late, but I can't move it up since 'center' isn't defined until later.似乎“directionsOptions: { origin: center }”运行得太晚了，但我无法将其向上移动，因为直到稍后才定义“center”。 Is there any way to setCenter earlier?有什么方法可以更早地设置中心吗？ At least I think that's the issue.至少我认为这是问题所在。
let map; function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: ["restaurant", "tourist_attraction", "bar", "cafe", "book_store", "convenience_store", "hospital"], maxPlaceCount: 24, }); map = localContextMapView.map; let geocoder = new google.maps.Geocoder(); geocoder.geocode({ address: "25325 Main St, Newhall, CA, USA" }, (results, status) => { if (status === "OK") { const center = results[0].geometry.location; map.setCenter(center); new google.maps.Marker({ position: center, map: map}); map.setOptions({ directionsOptions: { origin: center }, center: center, zoom: 14, }); } else { alert("Geocode was not successful for the following reason: " + status); } }); }
#map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<:DOCTYPE html> <html> <head> <title>Local Context Basic</title> <script src="https.//polyfill.io/v3/polyfill.min?js:features=default"></script> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" defer></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2020-11-15 10:28:52
google.maps.Map doesn't have a DirectionsOptions property. google.maps.Map没有DirectionsOptions属性。 Please refer to the docs .请参阅文档。 You need to set it on localContextMapView :您需要在localContextMapView上设置它：
localContextMapView.directionsOptions = {
origin: center
};
That said, with the code you provided, if the geocoder fails, you will have no map showing at all.也就是说，使用您提供的代码，如果地理编码器失败，您将根本看不到 map。 Is that the intended behavior?那是预期的行为吗？
let map; function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: ["restaurant", "tourist_attraction", "bar", "cafe", "book_store", "convenience_store", "hospital" ], maxPlaceCount: 24, }); map = localContextMapView.map; let geocoder = new google.maps.Geocoder(); geocoder.geocode({ address: "25325 Main St, Newhall, CA, USA" }, (results, status) => { if (status === "OK") { const center = results[0].geometry.location; map.setOptions({ center: center, zoom: 14 }); new google.maps.Marker({ position: center, map: map }); localContextMapView.directionsOptions = { origin: center }; } else { alert("Geocode was not successful for the following reason: " + status); } }); }
#map { height: 400px; } /* Optional: Makes the sample page fill the window. */ html, body { height: 400px; margin: 0; padding: 0; }
<:DOCTYPE html> <html> <head> <title>Local Context Basic</title> <script src="https.//polyfill.io/v3/polyfill.min?js:features=default"></script> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" defer></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> </body> </html>
If instead you set a default center and zoom, and adjust it when the geocoder is successful (along with setting new locationRestriction on the local context map), you would always have a map showing.相反，如果您设置默认中心和缩放，并在地理编码器成功时调整它（以及在本地上下文地图上设置新的locationRestriction ），您将始终显示 map。
let map; function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: ["restaurant", "tourist_attraction", "bar", "cafe", "book_store", "convenience_store", "hospital" ], maxPlaceCount: 24, }); map = localContextMapView.map; // Update localContext when user drags the map map.addListener('dragend', function() { localContextMapView.locationRestriction = map.getBounds(); }); // Set default center & zoom somewhere over NY map.setOptions({ center: new google.maps.LatLng(40.61,-73.97), zoom: 10 }); let geocoder = new google.maps.Geocoder(); geocoder.geocode({ address: "25325 Main St, Newhall, CA, USA" }, (results, status) => { if (status === "OK") { const center = results[0].geometry.location; // Set new center and zoom map.setOptions({ center: center, zoom: 14 }); // Set the location restriction to the new map bounds localContextMapView.locationRestriction = map.getBounds(); new google.maps.Marker({ position: center, map: map }); localContextMapView.directionsOptions = { origin: center }; } else { alert("Geocode was not successful for the following reason: " + status); } }); }
#map { height: 400px; } /* Optional: Makes the sample page fill the window. */ html, body { height: 400px; margin: 0; padding: 0; }
<:DOCTYPE html> <html> <head> <title>Local Context Basic</title> <script src="https.//polyfill.io/v3/polyfill.min?js:features=default"></script> <script src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" defer></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.