如何解决Google Maps geocode() 循环以放置标记
我有一个包含位置数据的数组,其中一项是地址 - 即。 “加利福尼亚州旧金山大街 123 号”。我想获取该地址,将其转换为坐标,然后使用这些坐标在地图上绘制标记。为此,我知道我需要使用 geocode()
,因此我将该部分添加到我的循环中。
如果我在数组中使用纬度和经度而不是地址,我可以让它正常工作。但是,由于我在循环中添加了 geocode()
,因此我只能获取数组中的第一个位置来显示标记。
我在这里看到一些类似的问题,建议使用 callback()
但我不明白。我还看到了将延迟添加到 geocode()
的 0.5 秒的建议,这对海报有用,但评论说它可能无法在较慢的互联网速度下加载所有位置。
// 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
});
}
});
}
}
解决方法
这就是我在 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>
在此代码中,我使用纬度和经度在地图上放置标记。
如果您想从地址中提取纬度和经度,请按以下方式使用地理编码器 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。