Question

我正在尝试从我的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>

我正在谷歌地图教程中使用该示例它显示地图但不是标记协助将不胜感激

Answer 1

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

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

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

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

（因为icon未定义）

live example

代码段

＆＃13;

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>';

＆＃13;

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

＆＃13;

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

＆＃13;

Google Maps SQL多个标记未显示

1 个答案: