谷歌地图SQL多个标记未显示

我正试图从SQL 中获取多个标记

我的XML文件正在按照要求绘制所需信息，并显示在以下链接中

  http://e-track.biz/map/xml.php

来自链接的XML：

<markers>
<marker MSISDN="27827910119" Time="23:30:35" Date="2016-01-01" lat="-26.2716" lng="28.22" Radius="971"/>
<marker MSISDN="27827910119" Time="07:31:41" Date="2015-11-05" lat="-26.3274" lng="28.2457" Radius="1460"/>
<marker MSISDN="27827910119" Time="07:31:40" Date="2015-11-05" lat="-26.3274" lng="28.2457" Radius="1460"/>
<marker MSISDN="27827910119" Time="10:13:01" Date="2015-10-09" lat="0" lng="0" Radius="0"/>
<marker MSISDN="27827910119" Time="16:38:19" Date="2015-10-04" lat="0" lng="0" Radius="0"/>
</markers>

像我在网站上看到的大多数其他问题一样，它没有为我显示标记

这是我的HTML文件，尝试将标记下载到地图上，如所示

 <!DOCTYPE html >
 <head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh0MbGxFVti1rJkypMgs8548dN4wr6oKY" 
        type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
  restaurant: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
  },
  bar: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
  }
};
function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(47.6145, -122.3418),
    zoom: 13,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;
  // 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 MSISDN = markers[i].getAttribute("lbs_msisdn");
      var Time = markers[i].getAttribute("lbs_time");
      var Radius = markers[i].getAttribute("distance");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + MSISDN + "</b> <br/>" + Time;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}
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() {}
    //]]>
          </script>
   </head>
    <body onload="load()">
     <div id="map" style="width: 500px; height: 300px"></div>
      </body>
 </html>

我在谷歌地图教程中使用了这个示例。它显示了地图，但没有标记。

将不胜感激

您的代码的这一行生成了一个javascript错误（Uncaught ReferenceError: type is not defined）：

var icon = customIcons[type] || {};

如果你不想要自定义图标，请删除该行并将标记的定义更改为：

var marker = new google.maps.Marker({
    map: map,
    position: point,
    });

（因为不会定义icon）

实例

代码片段：

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(47.6145, -122.3418),
    zoom: 13,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;
  // downloadUrl("SO_20160101.xml", function(data) {
  var xml = parseXml(xmlData); // data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    var MSISDN = markers[i].getAttribute("MSISDN");
    var Time = markers[i].getAttribute("Time");
    var Radius = markers[i].getAttribute("Radius");
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    bounds.extend(point);
    var html = "<b>" + MSISDN + "</b> <br/>" + Time;
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      // icon: icon.icon
    });
    bindInfoWindow(marker, map, infoWindow, html);
  }
  map.fitBounds(bounds);
  // });
}
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() {}
function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }
}
google.maps.event.addDomListener(window, "load", load);
var xmlData = '<markers><marker MSISDN="27827910119" Time="15:09:32" lat="-26.0" lng="28.0" Radius="3"/><marker MSISDN="27827910119" Time="19:07:32" lat="-26.2726" lng="28.2179" Radius="1206"/><marker MSISDN="27827910119" Time="19:08:56" lat="-26.2726" lng="28.2179" Radius="1206"/><marker MSISDN="27827910119" Time="19:21:29" lat="-26.2726" lng="28.2179" Radius="1206"/><marker MSISDN="27827910119" Time="21:58:13" lat="-26.2615" lng="28.2037" Radius="148"/><marker MSISDN="27827910119" Time="22:01:43" lat="-26.2615" lng="28.2037" Radius="148"/><marker MSISDN="27827910119" Time="22:02:07" lat="-26.2615" lng="28.2037" Radius="148"/><marker MSISDN="27827910119" Time="22:02:42" lat="-26.2615" lng="28.2037" Radius="148"/><marker MSISDN="27827910119" Time="22:13:15" lat="-26.2615" lng="28.2037" Radius="148"/><marker MSISDN="27827910119" Time="20:19:30" lat="-26.2615" lng="28.2037" Radius="148"/></markers>';

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

相关内容

最新更新

热门标签：