谷歌地图个人标记infowindow - 如何？ [英] Google maps individual marker infowindow - how to?

问题描述

我有这个工作multy标记脚本。标记打印在地图上，但是当我点击任何标记时，我可以看到相同的信息窗口..此循环中出现错误：

  function bindInfoWindow（marker，map，infowindow，content）{
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（content）; 
 infowindow.open（map，marker）; 
}）; 
} 
函数initialize（）{
 var map; 
 var locations =<？php echo json_encode（$ location）; ？取代; 
 
 var bounds = new google.maps.LatLngBounds（）; 
 var mapOptions = {
 mapTypeId：'roadmap'
}; 
 //在页面上显示地图
 map = new google.maps.Map（document.getElementById（googlemap），mapOptions）; 
 
 //多个标记
 var markers = locations; 
 //在地图上显示多个标记
 var infoWindow = new google.maps.InfoWindow（）; 
 
 //通过我们的数组标记和（i = 0; i< markers.length; i ++）{
 loc_array = markers [i] .split（，）;将每一个放置在地图
上。 
 var position = new google.maps.LatLng（loc_array [1]，loc_array [2]）; 
 bounds.extend（position）; 
 marker = new google.maps.Marker（{
 position：position，
 map：map，
 draggable：false，
 raiseOnDrag：true，
 title：loc_array [0] 
}）; 
 // Info窗口内容
 content = loc_array [0] + - < a class ='ac'onclick ='move（+ loc_array [4] +）;'href ='＃ >中+<？php echo json_encode（$ lang ['view_profile']）;？> +< / a>< span class ='p'> +<？php echo json_encode（$ lang ['phone']）;？> +：+ loc_array [6] +< / span>< span class ='p'> +<？php echo json_encode（$ lang ['address']）;？> +：+ loc_array [5] +，+ loc_array [7] +，+ loc_array [8] +< / span>; 
 bindInfoWindow（marker，map，infoWindow，content）; 
 
 // infowindow = new google.maps.InfoWindow（）; 
 console.log（content）; 
 //允许每个标记有一个信息窗口
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 infoWindow.setContent（content）; 
 infoWindow.open（map，marker）; 
} 
}）（marker，i））; 
 
 //自动使地图适合屏幕上的所有标记
 map.fitBounds（bounds）; 
} 
 bounds.extend（marker.position）; 
 //我们的fitBounds函数运行后，覆盖地图缩放级别（确保它只运行一次）
 var boundsListener = google.maps.event.addListener（（map），'bounds_changed'，function（event ）{
 map.fitBounds（bounds）; 
 google.maps.event.removeListener（boundsListener）; 
}）; 
} 
  

当我在控制台中打印单个信息时，可以看到不同的信息窗口，地图都是一样的：

  console.log（content）; 
  

我在body load
上调用initialize（）请帮助我错误的地方，谢谢！ 首先，按照以下方式全局声明 infowindow ：

  var infoWindow = new google.maps.InfoWindow（）; 
  

然后在创建标记和内容字符串之后调用这个函数：

  bindInfoWindow（marker，map，infoWindow，content）; 
  

这是函数的定义bindInfoWindow（）

 函数bindInfoWindow（marker，map，infowindow，content）{
 google.maps.event.addListener（marker ，'click'，function（）{
 infowindow.setContent（content）; 
 infowindow.open（map，marker）; 
}）; 
} 
  

I have this working multy markers script. Markers are printed on the map but when I click on any marker I can see same info window.. Something wrong in this loop:

    function bindInfoWindow(marker, map, infowindow, content) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(content);
        infowindow.open(map, marker);
    });
}
function initialize() {
var map;
var locations = <?php echo json_encode($location); ?>;

var bounds = new google.maps.LatLngBounds();
var mapOptions = {
    mapTypeId: 'roadmap'
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);

// Multiple Markers
var markers = locations;        
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow();

// Loop through our array of markers & place each one on the map 
for( i = 0; i < markers.length; i++ ){
loc_array = markers[i].split(",");
    var position = new google.maps.LatLng(loc_array[1], loc_array[2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        draggable: false,
        raiseOnDrag: true,
        title: loc_array[0]
    });
    // Info Window Content
    content=loc_array[0] + " - <a class='ac' onclick='move("+ loc_array[4] +");' href='#'>" + <?php echo json_encode($lang['view_profile']);?> + "</a><span class='p'>" + <?php echo json_encode($lang['phone']);?> + ": " + loc_array[6] + " </span><span class='p'>" + <?php echo json_encode($lang['address']);?> + ": " + loc_array[5] + ", " + loc_array[7] + ", " + loc_array[8] + "</span>";
    bindInfoWindow(marker, map, infoWindow, content);

    //infowindow = new google.maps.InfoWindow();
    console.log(content);
    // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(content);
            infoWindow.open(map, marker);
        }
    })(marker, i));

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
}
bounds.extend(marker.position); 
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
   map.fitBounds(bounds);
    google.maps.event.removeListener(boundsListener);
});
}

When I print individual info in console I can see different info windows, but on the map all come same:

console.log(content);

I call initialize() on body load Please help where I am wrong, Thanks !

解决方案

First of all declare infowindow globally in following way:

var infoWindow = new google.maps.InfoWindow();

Then after creating marker and content string just call this function:

bindInfoWindow(marker, map, infoWindow, content);

This is the definition of function bindInfoWindow()

function bindInfoWindow(marker, map, infowindow, content) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(content);
            infowindow.open(map, marker);
        });
    }

这篇关于谷歌地图个人标记infowindow - 如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！