Question

我正在制作标记＆amp;信息窗口使用＆＃39;每个＆＃39;循环使用jQuery迭代DOM的元素。我定义了一个全局信息标记变量，根据Maps API，这是制作它的方式，以便一次只显示一个信息标记。目前，点击标记无效。奇怪的是，地图中心周围有一个点，我可以点击它来显示一个信息标记（内容将其附加到其中一个标记）。知道我能做些什么来解决这个问题吗？

$(function () {
  function initialize() {

    // Get city coordinates .. set map options so map centers on city .. place map on map-canvas  
    var page_city_lat = $("#page_city_lat").text();
    var page_city_lng = $("#page_city_lng").text();
    var mapOptions = {
      center: new google.maps.LatLng(page_city_lat, page_city_lng),
      zoom: 10
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    // define concert object, mapCoords
    function Concert(x)
    {
      this.lat = $(x).find(".lat").text();
      this.lng = $(x).find(".lng").text();    
      this.headline = $(x).find(".event_title").text();
      this.venue = $(x).find(".venue").text();
      this.latlng = new google.maps.LatLng(this.lat, this.lng)
    };


    // Global infowindow variable declaration makes only 1 infowindow open at a time. 
    var infowindow = new google.maps.InfoWindow({}); 
    // Necessary to pre-declare variable?
    var map_ids = $(".map_id");
    $.each(map_ids, function (index, value) 
    {
      var listing = new Concert(value);
      var concertString = 'headline: ' + listing.headline + '<br>' + 'Venue' + listing.venue
      var concertMarker = new google.maps.Marker(
      {
        position: listing.latlng,
        map: map,
        title: listing.venue
      });
      infowindow.setContent(concertString);
      google.maps.event.addListener(concertMarker, 'click', function () {
          infowindow.open(map, concertMarker);    
      });
    });
  };
    google.maps.event.addDomListener(window, 'load', initialize);
});

Answer 1

请您在jsfiddle.net上实施您的代码，以便我们验证问题。

检查以下工作代码。希望你有所了解。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        Google Maps Example
</title>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'>
</script>
</head>
<body>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
        var infowindow = null;
        $(document).ready(function () {
            initialize();
        }
                                         );

        function initialize() {

            var centerMap = new google.maps.LatLng(39.828175, -98.5795);

        var myOptions = {
            zoom: 4,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

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

        setMarkers(map, sites);
        infowindow = new google.maps.InfoWindow({
            content: "loading..."
        }
                                                                                     );

        var bikeLayer = new google.maps.BicyclingLayer();
        bikeLayer.setMap(map);
    }

var sites = [
['Delhi', 29.45155, 79.00268, 4, 'This is Delhi.'],
        ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park']
    ];



function setMarkers(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4]
        }
                                                                             );

        var contentString = "Some content";

        google.maps.event.addListener(marker, "click", function () {
            //alert(this.html);
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        }
                                                                 );
    }
}
</script>

<div id="map_canvas" style="width: 600px; height: 600px;">
</div>
</body>
</html>

信息Windows未显示在使用Google Maps API的Markers上

1 个答案: