Google Maps API - 所有標記共享相同的infowindow

我一直試圖弄清楚這一點，但似乎無法完成！我通過Ajax從Laravel的數據庫獲取數據，然後試圖讓標記顯示每個標記的infowindows。標記將自己放置在我想要的不同地址上，但它們都共享同一個infowindow。（這是來自數據庫最後一行的信息）。Google Maps API - 所有標記共享相同的infowindow

我試圖實現我的代碼此解決方案：Google Maps API v3 - Markers All Share The Same InfoWindow

但它沒有工作......

我的代碼如下所示：

var app = new Vue({ 
    el: 'body', 

    data: { 
    users: $.getJSON("http://localhost:8000/data", function(data){ 
       var map = new google.maps.Map(document.querySelector('#map'), { 
        center: {lat: 57.708870, lng: 11.974560 }, 
        zoom: 14 
       }); 

       var geocoder = new google.maps.Geocoder(); 

       function bindInfoWindow(marker, map, infowindow, html) { 
        marker.addListener('click', function() { 
         infowindow.setContent(html); 
         infowindow.open(map, this); 
        }); 
       } 

       for (var i = 0; i < data.length; i++) { 

       var address = data[i]['address'] + ' Göteborg'; 
       var contentString = '<h4 style="color: #ffc62d">' + data[i]['foodtruck_name'] + '</h4>' 
            + '<b>Mat:</b> ' + data[i]['type_of_food'] 
            + '<br><b>Öppettider:</b> '+ data[i]['open_hours'] 
            + '<br><b>Adress:</b> '+ data[i]['address'] 
            + '<br><b>Hemsida:</b> '+ '<a href="http://' + data[i]['webadress'] + '" target="_blank">' + data[i]['webadress'] + '</a>'; 

       var image = { 
         url: 'http://localhost:8000/img/foodtruck.png', 
         // This marker is 20 pixels wide by 32 pixels high. 
         size: new google.maps.Size(45, 30), 
         // The origin for this image is (0, 0). 
         origin: new google.maps.Point(0, 0), 
         // The anchor for this image is the base of the flagpole at (0, 32). 
         anchor: new google.maps.Point(0, 30) 
        }; 

       var shape = { 
         coords: [1, 1, 1, 30, 45, 20, 18, 1], 
         type: 'poly' 
        }; 

       var infoWindow = new google.maps.InfoWindow({ 
       maxWidth: 250 
       }); 

       geocoder.geocode({'address': address}, function(results, status) { 
       if (status === google.maps.GeocoderStatus.OK) { 

        var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location, 
        icon: image, 
        shape: shape 
        }); 

       } else { 
        alert('Geocode was not successful for the following reason: ' + status); 
       } 

       bindInfoWindow(marker, map, infoWindow, contentString); 

       }); 

      }; 

      }) 
    }, 

    methods: { 
    createMap: function() { 
     var map = new google.maps.Map(document.querySelector('#map'), { 
      center: {lat: 57.708870, lng: 11.974560 }, 
      zoom: 14 
     }); 
    } 

    } 

});

人有一個想法或一個例子關於如何解決這個問題？這讓我瘋狂！ :-(

這是從數據對象返回的JSON：

[{"foodtruck_name":"Emils Foodtruck","open_hours":"11:00-16:00","address":"Stigbergsliden 9","type_of_food":"Mexikanskt tema","webadress":"www.emilwallgren.se"},{"foodtruck_name":"Kodameras Truck","open_hours":"08:00-17:00","address":"F\u00f6rsta L\u00e5nggatan 16","type_of_food":"Cookies","webadress":"www.kodamera.se"}]

來源

2016-06-19 Emil Wallgren

[就是這裏的這個答案，好友]（http://stackoverflow.com/a/9480418/1206267）。原因在於你如何構建你的循環和標記。 – Ohgodwhy

感謝@Ohgodwhy的提示，但我一直在嘗試和試驗這個帖子很多。你能給我一個更具體的例子或代碼示例:-)但是，謝謝你的答覆:-) –

，首先讓我們開始嘲諷所提供的數據用於這個目的，我將覆蓋$ .getJSON

var $ = { 
    getJSON : function(url, callback){ 
    callback(
     [{"foodtruck_name":"Emils Foodtruck","open_hours":"11:00-16:00","address":"Stigbergsliden 9","type_of_food":"Mexikanskt tema","webadress":"www.emilwallgren.se"},{"foodtruck_name":"Kodameras Truck","open_hours":"08:00-17:00","address":"F\u00f6rsta L\u00e5nggatan 16","type_of_food":"Cookies","webadress":"www.kodamera.se"}] 
    ); 
    } 
};

然後讓我們創建一個小的index.html看到的結果還包括使用框架從CDN網址

<!doctype html> 
<html class="no-js" lang=""> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="x-ua-compatible" content="ie=edge"> 
     <title>Maps</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <style type="text/css"> 
      #map{ 
       width: 100%; 
       height: 300px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id = "map"></div> 
     <script src="//cdn.jsdelivr.net/vue/1.0.25/vue.min.js"></script> 
     <script src="js/main.js"></script> 
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCTlirlFFxIHhstDEeARWQTym5AeU4db1I&callback=initMap"></script> 
    </body> 
</html>

在問題中提供的代碼真是太棒了:-)

初始代碼的主要問題是，geocoder.geocode方法是異步操作，而bindInfoWindow函數在狀態代碼OK條件，這在for循環已經完成後很可能會執行很多。這意味着傳遞給函數的所有參數都只是for循環的最後一次迭代的數據。

爲了證明asumption只是把 geocoder.geocode（{ '地址'：地址}，功能（結果狀態）{ 的console.log（「外」）;如果（狀態=== google.maps .GeocoderStatus.OK）{ console.log（「inside」）; } }）; 進入你的代碼，你會看到外面被觸發兩次之前觸發內部。內部延遲是因爲在執行之前有一些要求谷歌完成的請求。

要快速修復，只需將第一個循環中的所有數據收集起來，並利用遞歸函數添加它們即可。

完整的代碼看起來是這樣的（我包裹整個塊到默認地圖回調）

var $ = { 
    getJSON : function(url, callback){ 
    callback(
     [{"foodtruck_name":"Emils Foodtruck","open_hours":"11:00-16:00","address":"Stigbergsliden 9","type_of_food":"Mexikanskt tema","webadress":"www.emilwallgren.se"},{"foodtruck_name":"Kodameras Truck","open_hours":"08:00-17:00","address":"F\u00f6rsta L\u00e5nggatan 16","type_of_food":"Cookies","webadress":"www.kodamera.se"}] 
    ); 
    } 
}; 
initMap = function(){ 
    var app = new Vue({ 
    el: 'body', 
    data: { 
     users: $.getJSON("http://localhost:8000/data", function(data){ 
      function bindInfoWindow(marker) { 
       marker.addListener('click', function() { 
        this.infowindow.setContent(this.infowindowContent)      
        this.infowindow.open(this.map, this); 
       }); 
      } 
      var addmarkersRecursive = function addMarkers(markers){ 
       if(markers.length > 0){ 
        markerConfig = markers.shift(); 
        geocoder.geocode({'address': markerConfig.address}, function(results, status) { 
         if (status === google.maps.GeocoderStatus.OK) { 
          var marker = new google.maps.Marker({ 
           map: markerConfig.map, 
           position: results[0].geometry.location, 
           icon: markerConfig.image, 
           shape: markerConfig.shape, 
           infowindow : markerConfig.infowindow, 
           infowindowContent : markerConfig.contentString 

          }); 
          bindInfoWindow(marker, markerConfig.map, markerConfig.infoWindow, markerConfig.contentString); 
          addmarkersRecursive(markers);        
         } else { 
          alert('Geocode was not successful for the following reason: ' + status); 
         } 
        }); 
       } 
      }; 
      var map = new google.maps.Map(document.querySelector('#map'), { 
       center: {lat: 57.708870, lng: 11.974560 }, 
       zoom: 14 
      }); 
      var geocoder = new google.maps.Geocoder(); 
      var markers = []; 
      for (var i = 0; i < data.length; i++) { 
       var address = data[i]['address'] + ' Göteborg'; 
       var contentString = '<h4 style="color: #ffc62d">' + data[i]['foodtruck_name'] + '</h4>' 
       + '<b>Mat:</b> ' + data[i]['type_of_food'] 
       + '<br><b>Öppettider:</b> '+ data[i]['open_hours'] 
       + '<br><b>Adress:</b> '+ data[i]['address'] 
       + '<br><b>Hemsida:</b> '+ '<a href="http://' + data[i]['webadress'] + '" target="_blank">' + data[i]['webadress'] + '</a>'; 
       var image = { 
        url: 'http://t1.gstatic.com/images?q=tbn:ANd9GcT_vg5Yh1dmbqL4cVfaBoZhFfPwXJIZhJ5MFU9Y6lm4173JsKb8XEFK', 
        // This marker is 20 pixels wide by 32 pixels high. 
        size: new google.maps.Size(45, 30), 
        // The origin for this image is (0, 0). 
        origin: new google.maps.Point(0, 0), 
        // The anchor for this image is the base of the flagpole at (0, 32). 
        anchor: new google.maps.Point(0, 30) 
       }; 
       markers.push({ 
        map : map, 
        address: address, 
        contentString: contentString, 
        image: image, 
        shape : { 
         coords: [1, 1, 1, 30, 45, 20, 18, 1], 
         type: 'poly' 
        }, 
        infowindow : new google.maps.InfoWindow({maxWidth: 250 }) 
       }) 
      }; 
      addmarkersRecursive(markers); 
     }) 
    }, 

    methods: { 
     createMap: function() { 
     var map = new google.maps.Map(document.querySelector('#map'), { 
      center: {lat: 57.708870, lng: 11.974560 }, 
      zoom: 14 
     }); 
     } 

    } 

    }); 
}

來源

2016-06-20 14:35:31

Google Maps API - 所有標記共享相同的infowindow

回答

相關問題