谷歌地圖的JavaScript API和MySQL/AJAX

-1

我想從我的標記（座標等等）從MySQL數據庫中獲取一些數據，然後將這些標記添加到地圖與點擊偵聽器打開infoWindow。谷歌地圖的JavaScript API和MySQL/AJAX

這裏是我的代碼：

// Request to database 
    function getLocations() { 
     if (window.XMLHttpRequest) { 
      var xmlhttp = new XMLHttpRequest(); 
     } else {     
      var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xmlhttp.open("POST", "getlocations.php", true); 
     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 


     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 

       var returnValue = JSON.parse(xmlhttp.responseText); 
       var infoWindow = new google.maps.InfoWindow; 

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

        var marker = new google.maps.Marker({ 
         map: map, 
         icon: icons['ice_green'].icon, 
         position: new google.maps.LatLng(returnValue[i][2], returnValue[i][3]), 
         title: '' + returnValue[i][1], 
        }); 

        marker.addListener('click', function() { 
         infoWindow.setContent('test'); 
         infoWindow.open(map, marker); 
        }); 
       } 
      } 
     }; 

     xmlhttp.send(); 
    } 




    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 35.4681174, lng: 5.3043723}, 
     zoom: 17 
    }); 

    getLocations(); 
    }

到目前爲止，一切正常。標記位於正確的位置，但是當我點擊一個標記時，「infoWindow」僅爲最後添加的標記打開。

有什麼想法？哪裏有問題？

謝謝

來源

2017-04-10 user5458201

你永遠只能創建一個'infoWindow'把這個線'var infoWindow = new google.maps.InfoWindow;''marker.addListener（'click'，function（）{'將會是我的猜測 – George

我已更新答案。下面的代碼與第二個codepen中的代碼基本相同。

var map; 
var infoWindow; 

google.maps.event.addDomListener(window, "load", function() { 

    initMap(); 

    var retVals = [{lat:33.808678, lng:-117.918921}, {lat:33.708378, lng:-117.918920}, {lat:33.700378, lng:-117.917920}]; 
    callbackAjax(retVals, map); 
}); 

function initMap(){ 
    map = new google.maps.Map(document.getElementById("map_div"), { 
    center: new google.maps.LatLng(33.808678, -117.918921), 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
infoWindow = new google.maps.InfoWindow(); 
} 

function callbackAjax(returnValue, map){ 

    for(var i=0; i<returnValue.length; i++) { 
    createMarker(map, returnValue[i].lat, returnValue[i].lng, "<h1> test"+ i + "</h1><p>content</p>"); 
    } 

    function createMarker(map, lat, lng, content){ 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(lat, lng), 
     title: 'title'+i, 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(content); 
     infoWindow.open(map, this); 
    }); 
    return marker; 
    } 
}

編輯：我做了一個簡單的代碼筆。也許這有助於。 http://codepen.io/zelle7/pen/dvxgVb

EDIT2：這個codpen是適合您的需求http://codepen.io/zelle7/pen/XMvxzy

來源

2017-04-10 14:59:13 Zelle

非常感謝！它現在可以工作。:-) – user5458201

的兩個解決方案didn't工作也許更好。

所以，即使我初始化內的信息窗口循環或點擊監聽器裏，窗口只出現在最後的市場上贏得： -/

來源

2017-04-10 15:04:16 user5458201

谷歌地圖的JavaScript API和MySQL/AJAX

回答

相關問題