Google Maps geocode() 循环放置标记
Posted
技术标签:
【中文标题】Google Maps geocode() 循环放置标记【英文标题】:Google Maps geocode() loop to place markers 【发布时间】:2021-07-22 10:21:39 【问题描述】:我有一个包含位置数据的数组,其中一项是地址 - 即。 “加利福尼亚州旧金山市大街 123 号”。我想取那个地址,把它变成坐标,然后用这些坐标在地图上画一个标记。为此,我知道我需要使用geocode()
,所以我将这部分添加到我的循环中。
如果我在数组中使用纬度和经度而不是地址,我可以让它正常工作。但是,由于我在循环中添加了geocode()
,因此我只能获取数组中的第一个位置来显示标记。
我在这里看到了一些类似的问题,建议使用callback()
,但我不明白。我还看到了一个建议,将 geocode()
延迟 0.5 秒,这对海报有效,但 cmets 表示它可能无法以较慢的互联网速度加载所有位置。
如何解决此问题以正确显示所有位置?
// Create the map with markers.
function createmap(zoomlevel, centerpos, showDot)
// Create the map canvas with options.
var map = new google.maps.Map(document.getElementById('map-canvas'),
scrollwheel: false,
draggable: true,
mapTypeControl: false,
zoom: zoomlevel,
center: new google.maps.LatLng(40.577453, 2.237408), // Center the map at this location.
mapTypeId: google.maps.MapTypeId.ROADMAP
);
var marker, i;
// For each location in the array...
for (i = 0; i < locations.length; i++)
// Get the coordintes for the address.
var geocoder = new google.maps.Geocoder();
var address = locations[i][5]; // ***This variable will output the address.***
geocoder.geocode( 'address': address , function(results, status)
if (status == google.maps.GeocoderStatus.OK)
var location_latitude = results[0].geometry.location.lat();
var location_longitude = results[0].geometry.location.lng();
// Create the map marker icon (SVG file).
var marker_icon =
url: '//'+domain+'/__NEW__/_backend/assets/img/map-marker.svg',
anchor: new google.maps.Point(25,50),
scaledSize: new google.maps.Size(50,50)
// Place the marker on the map.
var marker = new google.maps.Marker(
position: new google.maps.LatLng(location_latitude, location_longitude),
map: map,
icon: marker_icon
);
);
【问题讨论】:
回调是修复它的唯一方法 【参考方案1】:这就是我在 Google 地图上放置地图标记的方式:
<script type="text/javascript">
let map;
let parameters;
function initMap()
map = new google.maps.Map(document.getElementById("map"),
center: lat: @Model.Latitude , lng: @Model.Longitude ,
zoom: @Model.Zoom,
);
@foreach (var asset in dbService.Assets)
@if (asset.State != Models.AssetState.deleted)
@:parameters = 'Id = @asset.Id\n' + 'Temperature = @asset.Temperature\n' + 'Moisture = @asset.Moisture\n';
@:setMarker('@asset.Latitude', '@asset.Longitude', '@asset.State');
function getIconByState(state)
if (state == 'non_functional')
return 'non-functional.png';
else if (state == 'under_maintenance')
return 'under-maintenance.png';
else if (state == 'functional')
return 'functional.png';
function setMarker(lat, lng, state)
var markerjs = new google.maps.Marker(
icon: getIconByState(state),
position: new google.maps.LatLng(lat, lng),
);
markerjs.setMap(map);
let infowindow = new google.maps.InfoWindow(
content: parameters,
);
markerjs.addListener("click", () =>
infowindow.open(map, markerjs);
);
</script>
//this is how to use the callback
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap&libraries=&v=weekly"
defer></script>
在这段代码中,我使用纬度和经度在地图上放置一个标记。
如果要从地址中提取经纬度,请按以下方式使用geocoder API:
<script type="text/javascript">
function setCoordinates()
let address = document.getElementById('zip').value;
if (address)
let geocoder = new google.maps.Geocoder();
if (geocoder)
geocoder.geocode( 'address': address , function (results, status)
if (status == google.maps.GeocoderStatus.OK)
document.getElementById('latitude').value = results[0].geometry.location.lat();
document.getElementById('longitude').value = results[0].geometry.location.lng();
else
console.log('geocoding failed');
);
else
alert('Please enter postal code to use this functionality');
</script>
【讨论】:
以上是关于Google Maps geocode() 循环放置标记的主要内容,如果未能解决你的问题,请参考以下文章
Google maps api geocode web 服务返回一个添加了点的地址
Google Maps API v3:使用 IP 地址多个 LatLng 的 Geocoder.geocode
使用 google geocode api 仅获取特定国家/地区的结果