Question

我正在尝试实现一个显示一些标记的谷歌地图，我想实现一个代码，允许我在点击每个标记时显示自定义内容（网页）...我搜索了net和我发现了这段代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
        var markers = [];
    function initialize() {
        
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(35.502686, 10.03658),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
    
    
            var locations = [
                ['point1', 35.502686, 11.050228, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png'],

                ['point2', 36.083198, 9.370759, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']

            ];
        
    
            var marker, i;

 var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

            var infowindow = new google.maps.InfoWindow({
	content: contentString
});
    
    
            google.maps.event.addListener(map, 'click', function() {
                infowindow.close();
            });
    
    
            for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                    map: map,
                    icon: locations[i][3]
                });
    
                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(locations[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
        
                markers.push(marker);
            }
    
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        
        function myClick(id){
            google.maps.event.trigger(markers[id], 'click');
        }
</script>
<div id="googlemap" style="width: 100%; height: 500px;"></div>
<a href="#" onclick="myClick(0);">Open Info Window</a>

但这只能让我显示“point1”或“point2”

知道如何解决这个问题吗？感谢

Answer 1

据我所知，你为完成任务做了很多工作。我使用以下JavaScript函数做了同样的事情。试一试：

function initialize() {
        var mapOptions = { zoom: 2, center: centerLatLang, scrollwheel: false, draggable: isDraggable, panControl: true }; //preparing the options for map
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);           //preparing the map

        var marker_image = '<?php echo $base_url . '/' . $path; ?>/images/AD_Map_Pin_small.png'; //take this inside the for loop if you want different marker
        var prev_infowindow =false;
        <?php $abc = 0; foreach(map_details() as $map_data) { ?>
            var latLang<?php echo $abc; ?> = new google.maps.LatLng<?php echo $map_data['field_coordinates_value'];?>;
            var content<?php echo $abc; ?> = "<div class='InfoMarker'><?php echo '<img src='.$base_url .'/' .$map_data['field_image'].'><h3>'.$map_data['title'].'</h3>' . $map_data['field_copy']; ?></div>";
            var infoWindow<?php echo $abc; ?> = new google.maps.InfoWindow({content: content<?php echo $abc; ?>});
            var marker<?php echo $abc; ?> = new google.maps.Marker({ position: latLang<?php echo $abc; ?>, map: map, icon: marker_image });
            google.maps.event.addListener(marker<?php echo $abc; ?>, 'click', function(){ if(prev_infowindow) {prev_infowindow.close(); }  prev_infowindow =infoWindow<?php echo $abc; ?>; infoWindow<?php echo $abc; ?>.open(map, marker<?php echo $abc; ?>);});
        <?php $abc++; } ?>
    }
    google.maps.event.addDomListener(window, 'load', initialize);

希望这有帮助。

Answer 2

执行时：

infowindow.setContent(locations[i][0]);

您正在将infowindow的内容设置为传递的文本。由于您的位置数组的第一个元素是＆＃39; point1＆＃39;或者＆＃39; point2＆＃39;，这就是您将InfoWindow内容设置为的内容。

例如，如果要显示contentString，请使用：

infowindow.setContent(contentString);

如何在地图标记上显示自定义内容

2 个答案: