谷歌地图 JavaScript API 和 MySQL/AJAX答案

【问题标题】：Google Maps JavaScript API and MySQL/AJAX谷歌地图 JavaScript API 和 MySQL/AJAX
【发布时间】：2017-04-10 14:54:43
【问题描述】：

我正在尝试从 MySQL 数据库中为我的标记（坐标等）获取一些数据，然后使用单击侦听器将这些标记添加到地图以打开 infoWindow。

这是我的代码：

  // 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”仅针对最后添加的标记打开。

有什么想法吗？问题出在哪里？

谢谢

【问题讨论】：

你只创建了一个infoWindow 把这行var infoWindow = new google.maps.InfoWindow; 放在marker.addListener('click', function() { 里面是我的猜测

标签： javascript mysql ajax google-maps

【解决方案1】：

你的两个解决方案都不起作用。

因此，即使我在 for 循环或点击侦听器内初始化信息窗口，该窗口也只会出现在最后一个标记处：-/

【讨论】：

【解决方案2】：

我已经更新了答案。下面的代码与第二个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

【讨论】：