谷歌API API信息窗口显示在谷歌地图API下1标记

Question

我有一个新的谷歌地图API添加多个标记和显示infowindow为每个标记，所有我的标记显示，但我的主要问题是infoWindow总是显示在一个地方，我看了everywere，但似乎无法找到正确的解决方案，所有我要显示的信息来自数据库，所以我使用xmlhttp.responseText从另一个函数获取信息是getData。

我的代码如下

function showMap(data){  

//Changing the json respose back to the javascript array 
    var LongLat = eval('(' + data + ')'); 

    // Creating a new map 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(-26.1981, 28.0488), 
    zoom: 5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 


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

    latLng = new google.maps.LatLng(LongLat[i][0],LongLat[i][1]); 

    // Creating a marker and putting it on the map 
    var marker = new google.maps.Marker({ 
    position:latLng, 
    map: map, 
    title: LongLat[i][0] 
    }); 


    var infoWindow = new google.maps.InfoWindow(); 
    // Attaching a click event to the current marker 

    google.maps.event.addListener(marker, "click", function(point){ 
     getData(this.position); 
     xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
      { 
       infoWindow.setContent(xmlhttp.responseText); 
       infoWindow.open(map,marker); 
      } 
     }    
     }); 
    } 
} 

和我的getData函数如下

function getData(d){ 

//将对象分隔为经度和经度 p =（d.toString（））;

c = p.indexOf(','); 
e = p.indexOf(')'); 
lat = p.substring(1,c); 
lon = p.substring(c+1,e); 

if(d == "results"){ 
    var htmlCode = t; 
} 

if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById('results').innerHTML = xmlhttp.responseText; 
     } 
    } 

    if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
     alert(xmlhttp.responseText); 
     return xmlhttp.responseText; 
    } 
var html = xmlhttp.open("GET","mapmaker.php?lat="+lat+"&lon="+lon,true); 
xmlhttp.send(); 
} 

Answer 1

您的代码，几乎是好的:)只是几个错误：

认沽地图，信息窗口作为全球

var map = null; 
    var infoWindow = null; 

    function initialize() 
    { 
     // Fill w/ sample data 
     var LongLat = new Array(); 
     LongLat[0] = new Array(-26.5, 28.5); 
     LongLat[1] = new Array(-26.0, 28.0); 

     // Creating a new map 
     map = new google.maps.Map(document.getElementById("map-canvas"), { 
      center: new google.maps.LatLng(-26.1981, 28.0488), 
      zoom: 5, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     infoWindow = new google.maps.InfoWindow(); 

     for(var i = 0; i < LongLat.length; i++) 
     { 
      var latLng = new google.maps.LatLng(LongLat[i][0], LongLat[i][1]); 

      AddMarkerToMap(latLng, i); 

     } // END FOR (LatLng) 
    } 

移动标记创造分离功能。这会隐藏变量

function AddMarkerToMap(latLng, i) 
    { 
     var marker = new google.maps.Marker({ 
      position:latLng, 
      map:map 
     }); 

     google.maps.event.addListener(marker, 'click', function() 
     { 
      infoWindow.setContent("Title: " + i); 
      infoWindow.open(map, marker); 
     }); 
    } 

Answer 2

我认为它更好地重用1 infoWindow。看看这个片断这对我的作品：

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


function addToMap() { 

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

     marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(marker_data[i].lat, marker_data[i].lng), 
      clickable: true, 
      id:marker_data[i].id 
     }); 

     google.maps.event.addListener(marker, "click", function() { 
      infowindow.close(); 
      load_content(this, this.id); 
     }); 

     marker.setMap(map); 

     /* here we keep track of the markers that we have added to the page */ 
     markers_on_map.push(marker); 
    } 
} 

function load_content(marker, id){ 
    $.ajax({ 
     url: '/map/getMarkerWindow/' + id, 
     success: function(data){ 
      infowindow.setContent(data); 
      infowindow.open(map, marker); 
     } 
    }); 
}