使用Google Maps API的信息窗口未顯示在標記上

Question

我正在使用jQuery的“每個”循環制作標記和信息窗口，以遍歷DOM元素。 根據Maps API，我定義了一個全局的infomarker變量，這是一種使其得以實現的方式，以便一次僅顯示一個infomarker。 當前，單擊標記不會執行任何操作。 奇怪的是，我可以單擊地圖中心周圍的一個點來顯示一個信息標記（其內容附加到其中一個標記上）。 知道我該如何解決嗎？

$(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>

使用Google Maps API的信息窗口未顯示在標記上

問題描述

1 個解決方案

解決方案1
1 已采納 2014-04-03 05:51:23

使用Google Maps API的信息窗口未顯示在標記上

問題描述

1 個解決方案

解決方案1 1 已采納 2014-04-03 05:51:23

解決方案1
1 已采納 2014-04-03 05:51:23