谷歌地图V3（与custome信息框的PHP / MYSQL） [英] Google Maps V3 (PHP/MYSQL with custome infobox)

问题描述

我使用带有PHP / MSQL的谷歌地图，我已经阅读了谷歌的文档，并从那里获取了代码。

我想显示自定义框如此示例。一切工作正常与我的代码，除了框内的文字，我总是实际上是我的数据库的最后一个条目的文本......如何管理这个？

  var customIcons = {
 0：{
图标：'gif_blue.gif'，
 shadow：'gif_blue.gif'
 }，
 1：{
图标：'gif_green.gif'，
 shadow：'gif_green.gif'
} 
}; 
 
函数initialize（）{
 var map = new google.maps.Map（document.getElementById（map_canvas），{
 center：new google.maps.LatLng（ 51.5001524，-0.1262362），
 zoom：14，
 mapTypeId：'terrain'
}）; 
 
 //根据你的PHP文件的名称改变它
 downloadUrl（xml.php，function（data）{
 var xml = data.responseXML; 
 var marker = xml.documentElement.getElementsByTagName（marker）; 
 for（var i = 0; i< markers.length; i ++）{
 var name = markers [i] .getAttribute （name）; 
 var address = markers [i] .getAttribute（address）; 
 var type = markers [i] .getAttribute（type）; 
 var point = new google.maps.LatLng（
 parseFloat（markers [i] .getAttribute（lat）），
 parseFloat（markers [i] .getAttribute（lng）））; 
 // var html =< b>+ name +< / b>< br />+ address; 
 var icon = customIcons [type] || {}; 
 var marker = new google.maps.Marker（{
 map：map，
 position：point，
 icon：icon.icon，
 shadow：icon.shadow 
}）; 
 
 
 
 
 var boxText = document.createElement（div ）; 
 boxText.style.cssText =border：1px solid black; margin-top：8px; background：yellow; padding：5px;; 
 boxText.innerHTML =Nom：< b> + name +< / b>< br />地址：+ address +< / b>< br />类型：+ type; 
 $ b $ myOptions = {
 content：boxText 
，disableAutoPan：false 
，maxWidth：0 
，pixelOffset：new google.maps.Size（ - 
，zIndex：null 
，boxStyle：{
 background：url（'tipbox.gif'）no-repeat
，opacity：0.75 
，width：280px
} 
，closeBoxMargin：10px 2px 2px 2px
，closeBoxURL：http://www.google.com/intl/zh-CN/mapfiles/close .gif
，infoBoxClearance：new google.maps.Size（1，1）
，isHidden：false 
，窗格：floatPane
，enableEventPropagation：false 
}; 
 
 var ib = new InfoBox（myOptions）; 
 //问题应该在这里：
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function（）{
 ib.open（map，marker）; 
} 
}）（marker，i））; 
 
} 
 
}）; 
 
 $ b函数bindInfoWindow（marker，map，infoWindow，html）{
 google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.setContent（html）; 
 infoWindow.open（map，marker）; 
}）; 
} 
 
函数downloadUrl（url，callback）{
 var request = window.ActiveXObject？ 
 new ActiveXObject（'Microsoft.XMLHTTP'）：
 new XMLHttpRequest; 
 
 request.onreadystatechange = function（）{
 if（request.readyState == 4）{
 request.onreadystatechange = doNothing; 
回调（request，request.status）; 
} 
}; 
 
 request.open（'GET'，url，true）; 
 request.send（null）; 
 
 
函数doNothing（）{} 
  

解决方案

问题在于 JavaScript 确实没有模块范围界定 。您在此循环中声明的所有变量：

  for（var i = 0; i< markers.length; i ++） {b $ b / *声明在这里* / 
} 
  

存在于你定义的匿名回调（ downloadUrl（xml.php，function（data）{/ * ... * /} ）。我发现你有试着来解决这个问题，但是你没有正确地做到这一点。

---

这应该工作：

$ p $ function initialize（）{
var map = new google.maps.Map （document.getElementById（map_canvas），{
center：new google.maps.LatLng（51.5001524，-0.1262362），
zoom：14，
mapTypeId：'terrain'
）};

//根据您的PHP文件的名称更改此值
downloadUrl（xml.php，function（data）{
function createMarker（markerXML） {
var name = ma rkerXML.getAttribute（name），
address = markerXML.getAttribute（address），
type = markerXML.getAttribute（type），
lat = parseFloat（markerXML.getAttribute （lat）），
lng = parseFloat（markerXML.getAttribute（lng）），

icon = customIcons [type] || {}，

marker = new google.maps.Marker（{
map：map，
position：new google.maps.LatLng（lat，lng），
图标：icon.icon，
shadow：icon.shadow
}），

boxText = document.createElement（div）;

boxText.style.cssText =border：1px solid black; margin-top：8px; background：yellow; padding：5px;;
boxText.innerHTML =Nom：< b> + name +< / b>< br />地址：+ address +< / b>< br />类型：+ type;

var myOptions = {
content：boxText，
disableAutoPan：false，
maxWidth：0，
pixelOffset：new google.maps.Size（ - 140，0），
zIndex：null，
boxStyle：{
background：url（'tipbox.gif'）no-repeat，
opacity：0.75，
width：280px
}，
closeBoxMargin：10px 2px 2px 2px，
closeBoxURL：http://www.google.com/intl/zh_CN/mapfiles/close .gif，
infoBoxClearance：new google.maps.Size（1，1），
isHidden：false，
pane：floatPane，
enableEventPropagation：false
};

var infoBox = new InfoBox（myOptions）;

google.maps.event.addListener（marker，'click'，function（）{
infoBox.open（map，marker）;
}
}） ;
}

var xml = data.responseXML，
markers = xml.documentElement.getElementsByTagName（marker），
numMarkers = markers.length; （var i = 0; i< numMarkers; i ++）{
createMarker（markers [i]）;


}
}）;
}


除了一些小的文体和性能调整之外，仅

我改变的是：

1. 打破循环到一个单独的函数中
   
2. 在 google.maps.event.addListener
$ b中删除无意义的立即函数调用$ b

I'm using google maps with PHP/MSQL, i've read the documentation on google and take the code from there.

I want to display custom box like this example. Everything works fine with my code, except for the text inside the box, i've always the text that is actually the last entry on my database... how to manage this?

var customIcons = {
  0: {
    icon: 'gif_blue.gif',
    shadow: 'gif_blue.gif'
  },
  1: {
    icon: 'gif_green.gif',
    shadow: 'gif_green.gif'
  }
};

function initialize() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: new google.maps.LatLng(51.5001524,  -0.1262362),
    zoom: 14,
    mapTypeId: 'terrain'
  });

  // Change this depending on the name of your PHP file
  downloadUrl("xml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      //var html = "<b>" + name + "</b> <br/>" + address;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });




    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = "Nom : <b>" + name + "</b> <br/>Adresse :" + address + "</b> <br/>Type :" + type;

    var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"
             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false
    };

            var ib = new InfoBox(myOptions);
            //THE PROBLEM SHOULD BE HERE :
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              ib.open(map, marker);
            }
          })(marker, i));

    }

  });

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

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

解决方案

The problem is that JavaScript does not have block scoping. All of the variables you declare in this loop:

for (var i = 0; i < markers.length; i++) {
    /* declarations here */
}

exist within the scope of the anonymous callback you have defined (downloadUrl("xml.php", function(data) { /* ... */ }). I see that you have tried to fix this problem with the immediate function invocation that you commented, but you didn't do it correctly.

---

This should work:

function initialize() {
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(51.5001524, -0.1262362),
        zoom: 14,
        mapTypeId: 'terrain'
    });

    // Change this depending on the name of your PHP file
    downloadUrl("xml.php", function(data) {
        function createMarker(markerXML) {
            var name = markerXML.getAttribute("name"),
                address = markerXML.getAttribute("address"),
                type = markerXML.getAttribute("type"),
                lat = parseFloat(markerXML.getAttribute("lat")),
                lng = parseFloat(markerXML.getAttribute("lng")),

                icon = customIcons[type] || {},

                marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng(lat, lng),
                    icon: icon.icon,
                    shadow: icon.shadow
                }),

                boxText = document.createElement("div");

            boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
            boxText.innerHTML = "Nom : <b>" + name + "</b> <br/>Adresse :" + address + "</b> <br/>Type :" + type;

            var myOptions = {
                content: boxText,
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-140, 0),
                zIndex: null,
                boxStyle: {
                    background: "url('tipbox.gif') no-repeat",
                    opacity: 0.75,
                    width: "280px"
                },
                closeBoxMargin: "10px 2px 2px 2px",
                closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false
            };

            var infoBox = new InfoBox(myOptions);

            google.maps.event.addListener(marker, 'click', function () {
                    infoBox.open(map, marker);
                }
            });
        }

        var xml = data.responseXML,
            markers = xml.documentElement.getElementsByTagName("marker"),
            numMarkers = markers.length;

        for (var i = 0; i < numMarkers; i++) {
            createMarker(markers[i]);
        }
    });
}

Aside from a couple of small stylistic and performance tweaks, the only things I changed were:

1. Breaking the logic in your for loop out into a separate function
2. Removing the pointless immediate function invocation in google.maps.event.addListener

这篇关于谷歌地图V3（与custome信息框的PHP / MYSQL）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！