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

回答

相关问题