如何在 Google Map API 中使用地址而不是纬度/经度 [英] How to use Address instead of Lat/Long in Google Map API
问题描述
我想使用 Google 地图标记来标记我们提供服务的地点.我使用纬度/经度的代码工作正常,但在我的项目中我需要使用城市名称而不是纬度/经度.我怎么能做到这一点有什么办法做到这一点?这是我的代码
<div id="map" style="height:500px;"></div><脚本>var 邻域 = [{ 纬度: 31.6400, lng: 74.8600 },{ 纬度: 28.6139, lng: 77.2090 },{ 纬度: 12.9667, lng: 77.5667 },{ 纬度: 31.3260, lng: 75.5760 },{ 纬度:30.7500,lng:76.7800 },{ 纬度: 30.3400, 纬度: 76.3800 }];var 标记 = [];无功地图;函数 initMap() {map = new google.maps.Map(document.getElementById('map'), {变焦:5,中心:{ 纬度:28.6139,长度:77.2090 }});}功能下降(){清除标记();for (var i = 0; i <script async defer src="https://maps.googleapis.com/maps/api/js?key=API_Key&signed_in=true&callback=initMap">
您必须使用地理编码 API.将地址设为 Lat/lng 的示例:
doGeocode: function (address, postal_code, callback) {console.log("测试:"+address.toString());var geocoder = new google.maps.Geocoder();geocoder.geocode({地址":地址,'组件限制':{邮政编码":邮政编码,'国家':'德'}},功能(结果,状态){如果(状态 === google.maps.GeocoderStatus.OK){回调(结果);} 别的 {//错误处理alert('地理编码失败,原因如下:' + status);}});
注意:地址也可以包含houseNumber,但需要输入一个空格.
还有一种从 Lat/lng 获取地址的反向方法.以防万一有些需要:
reverseGeocoder: function (lat, lng, callback) {var geocoder = 新的 google.maps.Geocoder;var addressComponents = {};geocoder.geocode({'地点': {纬度:纬度,lng: lng}},功能(结果,状态){如果(状态 === google.maps.GeocoderStatus.OK){如果(结果[1]){var result = results[0].address_components;for (var i = 0; i < result.length; i++) {if (result[i].types[0] == "route") {console.log(result[i].long_name);addressComponents.route = result[i].long_name}if (result[i].types[0] == "street_number") {console.log(result[i].long_name);addressComponents.street_number = result[i].long_name}if (result[i].types[0] == "locality") {控制台日志(结果 [i].long_name);addressComponents.locality = result[i].long_name}if (result[i].types[0] == "postal_code") {控制台日志(结果 [i].long_name);addressComponents.postal_code = result[i].long_name}}回调(地址组件);} 别的 {alert('没有找到任何信息.');}}别的 {alert("地理定位abfrage konnte leider nicht ausgeführt werden."+status);}});
从上面的第一个函数中,您将获得 Lat/lng.然后简单地使用这样的函数:
var newMarkers = [];//全局标记数组标记:函数(纬度,经度){console.log("新标记");//console.log("LAT:"+lat+"LNG:"+lng);var 标记 = 新的 google.maps.Marker({位置:{lat:lat,lng:lng},图标:图标,地图:地图});标记.推(标记);标记.addListener('点击',函数(){//InfoWindow 或任何你想要的});map.setCenter({lat: lat, lng: lng});地图.setZoom(16);},
I want to use Google Map Markers to mark the places where we provide our services. MY Code using Lat/Long is working Fine but in my Project i need to use City Names instead of lat/long. How can i accomplish this is there any way to do this? here is my code
<div id="map" style="height:500px;"></div>
<script>
var neighborhoods = [
{ lat: 31.6400, lng: 74.8600 },
{ lat: 28.6139, lng: 77.2090 },
{ lat: 12.9667, lng: 77.5667 },
{ lat: 31.3260, lng: 75.5760 },
{ lat: 30.7500, lng: 76.7800 },
{ lat: 30.3400, lng: 76.3800 }
];
var markers = [];
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: { lat: 28.6139, lng: 77.2090 }
});
}
function drop() {
clearMarkers();
for (var i = 0; i < neighborhoods.length; i++) {
addMarkerWithTimeout(neighborhoods[i], i * 200);
}
}
function addMarkerWithTimeout(position, timeout) {
window.setTimeout(function () {
markers.push(new google.maps.Marker({
position: position,
map: map,
title: 'Jassie',
animation: google.maps.Animation.DROP
}));
}, timeout);
}
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
$(window).load(function () {
drop();
});
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_Key&signed_in=true&callback=initMap"> </script>
</div>
You have to use the Geocoding API. An example to make an Address to Lat/lng:
doGeocode: function (address, postal_code, callback) {
console.log("TEST: "+address.toString());
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address,
'componentRestrictions': {
'postalCode': postal_code,
'country': 'de'
}
}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
callback(results);
} else {
//Error handling
alert('Geocode was not successful for the following reason: ' + status);
}
});
Note: The address can also contain the houseNumber but enter a whitespace.
There is also a reverse Way to get Addresses from Lat/lng. Just in case some needs that:
reverseGeocoder: function (lat, lng, callback) {
var geocoder = new google.maps.Geocoder;
var addressComponents = {};
geocoder.geocode({
'location': {
lat:lat,
lng: lng
}
}, function (results, status){
if(status === google.maps.GeocoderStatus.OK){
if (results[1]) {
var result = results[0].address_components;
for (var i = 0; i < result.length; i++) {
if (result[i].types[0] == "route") {
console.log(result[i].long_name);
addressComponents.route = result[i].long_name
}
if (result[i].types[0] == "street_number") {
console.log(result[i].long_name);
addressComponents.street_number = result[i].long_name
}
if (result[i].types[0] == "locality") {
console.log(result[i].long_name);
addressComponents.locality = result[i].long_name
}
if (result[i].types[0] == "postal_code") {
console.log(result[i].long_name);
addressComponents.postal_code = result[i].long_name
}
}
callback(addressComponents);
} else {
alert('No information found.');
}
}else {
alert("Die geolocation abfrage konnte leider nicht ausgeführt werden. "+status);
}
});
From the first function above you will get the Lat/lng. Then simply use a function like this:
var newMarkers = []; //Global marker array
marker: function (lat, lng) {
console.log("new marker");
//console.log("LAT: "+lat+ "LNG: "+lng);
var marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
icon: icon,
map: map
});
markers.push(marker);
marker.addListener('click', function () {
//InfoWindow or whatever u want
});
map.setCenter({lat: lat, lng: lng});
map.setZoom(16);
},
这篇关于如何在 Google Map API 中使用地址而不是纬度/经度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!