如何在单独的 div 中显示信息窗口内容

debugcn 发表于 Dev

肖恩

我在我的网站上使用谷歌地图 api，而不是在信息框中显示内容，我想在谷歌地图 html 之外的单独 div 中显示内容。因此，当单击标记时，该标记的内容在#sidebar.

任何人都可以帮我指出正确的方向吗？

var infowindow = new google.maps.InfoWindow();
function initialize() {
    map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 12, 
        center: new google.maps.LatLng(52.4862, 1.8904),
        scrollwheel:  false,
    });
    var latlngbounds = new google.maps.LatLngBounds();
    for (var i = 0; i < locations.length; i++) {  
        var marker = new google.maps.Marker({
            position: locations[i].latlng,
            map: map,
            icon: '../../../img/map-marker-elf.png'
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i].info);
            infowindow.open(map, marker);  
          }
        })(marker, i));

        latlngbounds.extend(marker.position);
        //Center map and adjust Zoom based on the position of all markers.
        if (latlngbounds.getNorthEast().equals(latlngbounds.getSouthWest())) {
       var extendPoint = new google.maps.LatLng(latlngbounds.getNorthEast().lat() + 0.01, latlngbounds.getNorthEast().lng() + 0.01);
       latlngbounds.extend(extendPoint);
        }

        map.fitBounds(latlngbounds);
        map.setCenter(latlngbounds.getCenter());

    }
}
 <div class="map-wrapper">
        <div id="sidebar"></div>
        <div id="map" style="width: 100%; height: 500px;"></div>
</div>

邓肯

简单的：

google.maps.event.addListener(marker, 'click', (function(i) {
    return function() {
        document.getElementById('sidebar').innerHTML = locations[i].info;
    }
})(i));

概念证明小提琴

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。