Javascript谷歌地图Api,带有链接的多个标记,只有geocder
Javascript Google Maps Api, multiple markers with links, only geoceder
我有问题把链接放在多个标记上,我可以在地图上显示我的标记,但是当我尝试把链接放在它们上时,我总是在所有标记上有相同的链接,最后。这里我提供了一个示例代码:
<div id="map" style="height: 400px; width:100%;"></div>
<script>
var markers = [{"name":"Vasto","url":"http://www.google.com"},{"name":"Chieti","url":"http://www.wikipedia.com"}];
var geocoder;
var map;
var LatLng;
var url;
console.log(markers);
function initMap() {
LatLng = {lat: 42.2872297, lng: 13.3403448};
map = new google.maps.Map(document.getElementById('map'), {zoom: 8, center: LatLng});
geocoder = new google.maps.Geocoder();
setMarkers();
}
function setMarkers() {
var marker, i, url;
for( i = 0; i < markers.length; i++ ) {
url = markers[i].url;
geocoder.geocode({'address': markers[i].name}, function(results, status) {
if (status === 'OK') {
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: results[0].address_components[0].long_name,
});
google.maps.event.addListener(marker, "click", function() {
window.location.href = url;
});
} else {
/*console.log('Geocode was not successful for the following reason: ' + status);*/
}});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap" async defer></script>
解决方案吗?提前感谢
由于异步代码,您需要更改您的代码位
function setMarkers() {
markers.forEach(function(item) {
var url = item.url;
geocoder.geocode({'address': item.name}, function(results, status) {
if (status === 'OK') {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: results[0].address_components[0].long_name,
});
google.maps.event.addListener(marker, "click", function() {
window.location.href = url;
});
} else {
/*console.log('Geocode was not successful for the following reason: ' + status);*/
}});
}
}
相关文章:
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 为什么只有工厂在棱角分明的网站上被提及
- 制作一个regex来验证只有一个数字的字符串
- 指令的模板必须只有一个根元素:With restrict E&替换true
- JavaScript:只有当数组中的所有项都为true时才执行函数
- KeyPress和Keydown在这个特定的代码上不起作用.只有key-up起作用
- Angularjs:空对象,当只有一次点击时
- 为什么引导程序下拉菜单只有在包含bootstrap-responsive.css时才起作用
- 很少有角服务,只有常数不同
- 只有少数标记上的infobox值为null
- Javascript XMLHttpRequest——只有第一个POST请求有效
- 如何获得一个只有时间的moment.js日期对象
- Angular Datetimepicker:指令'的模板;uib时间选择器'必须只有一个根元素
- 如果满足某些条件,我如何才能创建一个只有值的对象
- 只有当Javascript控制台在chrome上打开时,Javascript才能工作
- Angularjs:如何让ui选择只有一种方式的模型竞标
- ReactJS只有在操作完成后才能执行某些操作
- 为什么JS RegEx提取多个值(只有一个匹配)
- JS-颜色选择器只有第一个工作
- Javascript谷歌地图Api,带有链接的多个标记,只有geocder