将地址转换为Google Maps Local Context(地理编码+ Local Context Maps)的坐标 [英] Convert address into coordinates for Google Maps Local Context (Geocoding + Local Context Maps)
本文介绍了将地址转换为Google Maps Local Context(地理编码+ Local Context Maps)的坐标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将Google Maps Local Context插入我的网站，并且希望使用地址字符串(美国加利福尼亚州州城市Main Main 1234号)对中并在地图上显示标记.
I am attempting to plug Google Maps Local Context into my website, and I am looking to use an address string (1234 Main St, City, State, USA) to center and display a marker on my map.
这是我在网站上显示一张简单地图的代码，但是我需要帮助来获取地址而不是坐标.
Here's the code I have that displays a simple map on the site, but I need help getting an address to work instead of coordinates.
我必须使用Geocoder，但需要将其与Google Maps Local Context地图绑定在一起的帮助.
I have to use Geocoder, but I need help tying it together with the Google Maps Local Context map.
let map;
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: ["restaurant", "tourist_attraction"],
maxPlaceCount: 12,
});
const center = { lat: 37.4219998, lng: -122.0840572 };
map = localContextMapView.map;
new google.maps.Marker({ position: center, map: map });
map.setOptions({
center: center,
zoom: 14,
});
}
https://jsfiddle.net/cegytdj6/
代码段: *
let map;
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: ["restaurant", "tourist_attraction"],
maxPlaceCount: 12,
});
const center = {
lat: 37.4219998,
lng: -122.0840572
};
map = localContextMapView.map;
new google.maps.Marker({
position: center,
map: map
});
map.setOptions({
center: center,
zoom: 14,
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#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>
推荐答案
See the simple geocoder example for how to use the geocoder in the Google Maps Javascript API v3. The code below will use the geocoder to return the coordinates for "1600 Amphitheatre Parkway, Mountain View, CA".
let geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: "1600 Amphitheatre Parkway, Mountain View, CA" }, (results, status) => {
if (status === "OK") {
const center = results[0].geometry.location;
map.setCenter(center);
new google.maps.Marker({ position: center, map: map });
map.setOptions({
center: center,
zoom: 14,
});
将其放入您的现有代码中:
putting that into your existing code:
let map;
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: ["restaurant", "tourist_attraction"],
maxPlaceCount: 12,
});
map = localContextMapView.map;
let geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: "1600 Amphitheatre Parkway, Mountain View, CA"
}, (results, status) => {
if (status === "OK") {
const center = results[0].geometry.location;
map.setCenter(center);
new google.maps.Marker({
position: center,
map: map
});
map.setOptions({
center: center,
zoom: 14,
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
代码段:
let map;
function initMap() {
const localContextMapView = new google.maps.localContext.LocalContextMapView({
element: document.getElementById("map"),
placeTypePreferences: ["restaurant", "tourist_attraction"],
maxPlaceCount: 12,
});
map = localContextMapView.map;
let geocoder = new google.maps.Geocoder();
geocoder.geocode({
address: "1600 Amphitheatre Parkway, Mountain View, CA"
}, (results, status) => {
if (status === "OK") {
const center = results[0].geometry.location;
map.setCenter(center);
new google.maps.Marker({
position: center,
map: map
});
map.setOptions({
center: center,
zoom: 14,
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#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>
这篇关于将地址转换为Google Maps Local Context(地理编码+ Local Context Maps)的坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
