来自解析XML的信息框的多个地图标记

时间：2013-03-21 16:03:48

标签： javascript google-maps-api-3 xml-parsing google-maps-markers

我知道我很接近解决这个问题，我只需要朝着正确的方向努力。我正在从一个数据库中生成XML，该数据库具有标记位置和一些其他数据，这些数据应该在点击时显示在信息框中。我正确生成XML并正确绘制标记。我的问题在于信息框。我的信息框显示最后放置的标记的数据。我创建了一个存储一个数据（NAME）的数组，但是信息框仍然只显示最后一个标记的信息。一旦我弄清楚如何正确显示NAME，我就可以继续为其余数据创建数组。这是我的代码，以进一步解释：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href="styles.css" rel="stylesheet" type="text/css">
    <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?     key=MY_KEY&sensor=true"></script>
    <script type="text/javascript" src="infobox.js"></script>
    <script type="text/javascript">

var mapstyle = [styles-removed-for-space]

var icon = 'mapicon.png';

//<![CDATA[

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(10,-10),
    zoom: 3,
    minZoom: 3,
    disableDefaultUI: true,
    styles: mapstyle,
    mapTypeId: 'roadmap'
  });

  var name = [];

  downloadUrl("genxml.php", function(data) {
    var xml = data.responseXML;
    var places = xml.documentElement.getElementsByTagName("place");
    for (var x = 0; x < places.length; x++) {
      var getname = places[x].getAttribute("name");
      name.push(getname);
      var address = places[x].getAttribute("address");
      var point = new google.maps.LatLng(
          parseFloat(places[x].getAttribute("lat")),
          parseFloat(places[x].getAttribute("lng")));
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon,
        title: getname
      });

      var boxText = document.createElement("div");
      boxText.id = "infobox"
      boxText.style.cssText = " margin-top: 8px; background: white; padding: 5px;";
      boxText.innerHTML = name[x];

      var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-250, -173)
        ,zIndex: null
        ,boxStyle: { 
          background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat"
          ,opacity: 0.75
          ,width: "500px"
          ,height: "300px"
          ,textAlign: "center"
         }
        ,closeBoxMargin: "13px 5px 0px 0px"
        ,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);

      google.maps.event.addListener(marker, 'click', function(e) {
        map.setZoom(13);
        map.setCenter(this.getPosition());
        ib.open(map, this);
      });

    }

  });
}

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() {}

//]]>

</script>

</head>

    <body onload="load()">
       <div id="map" style="width:100%; height:100%"></div>
    </body>
</html>

我相信我忽略了一些简单的事情。任何帮助，将不胜感激。非常感谢你。

1 个答案:

答案 0 :(得分：1)

未经测试：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href="styles.css" rel="stylesheet" type="text/css">
    <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?     key=MY_KEY&sensor=true"></script>
    <script type="text/javascript" src="infobox.js"></script>
    <script type="text/javascript">

var mapstyle = [styles-removed-for-space]

var icon = 'mapicon.png';

//<![CDATA[

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(10,-10),
    zoom: 3,
    minZoom: 3,
    disableDefaultUI: true,
    styles: mapstyle,
    mapTypeId: 'roadmap'
  });

  var name = [];

  downloadUrl("genxml.php", function(data) {
    var xml = data.responseXML;
    var places = xml.documentElement.getElementsByTagName("place");
    for (var x = 0; x < places.length; x++) {
      var getname = places[x].getAttribute("name");
      name.push(getname);
      var address = places[x].getAttribute("address");
      var point = new google.maps.LatLng(
          parseFloat(places[x].getAttribute("lat")),
          parseFloat(places[x].getAttribute("lng")));
      createMarker(point, address, getname, name);
    }

  });
}

function createMarker(point, address, getname, name) {
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon,
        title: getname
      });

      var boxText = document.createElement("div");
      boxText.id = "infobox"
      boxText.style.cssText = " margin-top: 8px; background: white; padding: 5px;";
      boxText.innerHTML = name[x];

      var myOptions = {
         content: boxText
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-250, -173)
        ,zIndex: null
        ,boxStyle: { 
          background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat"
          ,opacity: 0.75
          ,width: "500px"
          ,height: "300px"
          ,textAlign: "center"
         }
        ,closeBoxMargin: "13px 5px 0px 0px"
        ,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);

      google.maps.event.addListener(marker, 'click', function(e) {
        map.setZoom(13);
        map.setCenter(this.getPosition());
        ib.open(map, this);
      });
}

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() {}

//]]>

</script>

</head>

    <body onload="load()">
       <div id="map" style="width:100%; height:100%"></div>
    </body>
</html>
相关问题
最新问题