javascript - 带有信息窗口的 Google Maps API 多个标记

标签 javascript google-maps google-maps-api-3 google-maps-markers infowindow

我正在尝试添加多个标记,每个标记都有自己的信息窗口,点击时会出现。我在获取信息窗口时遇到了问题,当我尝试它时要么只显示一个没有信息窗口的标记。

谢谢,如果您需要更多信息,请告诉我

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0;
    padding: 0
}

#map_canvas {
    height: 100%
}
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false">
</script>
<script type="text/javascript">

var locations = [
    ['loan 1', 33.890542, 151.274856, 'address 1'],
    ['loan 2', 33.923036, 151.259052, 'address 2'],
    ['loan 3', 34.028249, 151.157507, 'address 3'],
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
    ['loan 5', 33.950198, 151.259302, 'address 5']
];

function initialize() {

    var myOptions = {
        center: new google.maps.LatLng(33.890542, 151.274856),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    };
    var map = new google.maps.Map(document.getElementById("default"),
        myOptions);

    setMarkers(map, locations)
}


function setMarkers(map, locations) {

    var marker, i
    for (i = 0; i < locations.length; i++) {

        var loan = locations[i][0]
        var lat = locations[i][1]
        var long = locations[i][2]
        var add = locations[i][3]

        latlngset = new google.maps.LatLng(lat, long);

        var marker = new google.maps.Marker({
            map: map, title: loan, position: latlngset
        });
        map.setCenter(marker.getPosition())

        var content = "Loan Number: " + loan + '</h3>' + "Address: " + add

        var infowindow = new google.maps.InfoWindow()

        google.maps.AddListener(marker, 'click', function (map, marker) {
            infowindow.setContent(content)
            infowindow.open(map, marker)
        });
    }
}


</script>
</head>
<body onload="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>

最佳答案

你可以使用闭包。只需像这样修改您的代码:

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
    };
})(marker,content,infowindow));  

这是 DEMO

关于javascript - 带有信息窗口的 Google Maps API 多个标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11106671/

相关文章:

javascript - 动态添加数字进行选择

ios - 在 iOS 的 Google Maps SDK 寄存器中将 Channel、ClientId 放在哪里?

python - 如何修复 "googlemaps.exceptions.ApiError : REQUEST_DENIED"

javascript - 连接并扩展 Google map 上的多边形编辑功能

javascript - Google Maps API v3 不显示

javascript - 在 onKeyUp() 上格式化导致光标跳到输入字段的末尾

Javascript 将字符串转化为kb格式

javascript - 如何根据所选半径显示谷歌地图

javascript - 根据纬度和经度值构建时,Google map 不显示路线

javascript - 无法将 Canvas 加载到 THREE.Texture() 中;