问题使用自定义图标获取XML数据以在我的网站上的Google地图中显示

Question

大家好我正试图解决让我的XML数据显示在地图中的问题。我仍在学习代码，但也许有人可以帮我确定图标/数据无法显示的原因。

以下是我的XML示例：

<?xml version="1.0"?>
<markers>
<marker
id="461"
name="Pilot Travel Center"
address="I-20 / 59, Exit 123"
city="Birmingham"
state="AL"
zip="35204"
phone="xxx-xxx-xxxx"
fax="xxx-xxx-xxxx"
manager="Joe"
lat="33.529307"
lng="-86.852215"
url="http://www.pilotflyingj.com"
type="restaurant"/>

<marker
id="1402"
name="Flying J Travel Plaza"
address="Ross Clark Highway / Highway 231"
city="Dothan"
state="AL"
zip="36301"
phone="xxx-xxx-xxxx"
fax="xxx-xxx-xxxx"
manager="Johnny"
lat="31.192005"
lng="-85.399838"
url="http://www.pilotflyingj.com"
type="restaurant"/>
</markers>

这是谷歌API部分

<script>

  var customIcons = { 
restaurant: {
icon: 'ts_images/cat_scales.png',

},
bar: {
icon: 'ts_images/xx.png',

}
};



    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(39.809734, -98.555620),
      zoom: 4

    });
    var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP or XML file
      downloadUrl('xml/cat_scales.xml', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var id = markerElem.getAttribute('id');
          var name = markerElem.getAttribute('name');
          var address = markerElem.getAttribute('address');
          var city = markerElem.getAttribute('city');
          var state = markerElem.getAttribute('state');
          var zip = markerElem.getAttribute('zip');
          var phone = markerElem.getAttribute('phone');
          var fax = markerElem.getAttribute('fax');
          var manager = markerElem.getAttribute('manager');
          var url = markerElem.getAttribute('url');
          var phone = markerElem.getAttribute('phone');
          var type = markerElem.getAttribute('type');
          var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('lat')),
              parseFloat(markerElem.getAttribute('lng')));

          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = name
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = address
          infowincontent.appendChild(text);

          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
          map: map,
          position: point,
          icon: icon.icon

          });


          marker.addListener('click', function() {
            infoWindow.setContent(infowincontent);
            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>

我已搜索但无法确定问题所在。我非常感谢你的帮助。谢谢。

Answer 1

使用自定义图标的完整网址。它必须是Web上公开提供的完整URL（指向您的自定义图标的Web服务器）。

例如

（使用我服务器上的图标）：

http://www.geocodezip.com/mapIcons/marker_red.png

所以定义这样的自定义图标结构：

var customIcons = {
  restaurant: {
    icon: 'http://www.geocodezip.com/mapIcons/marker_red.png',
  },
  bar: {
    icon: 'http://www.geocodezip.com/mapIcons/marker_blue.png',
  }
};

proof of concept fiddle

代码段

＆＃13;

＆＃13;

var customIcons = {
  restaurant: {
    icon: 'http://www.geocodezip.com/mapIcons/marker_red.png',

  },
  bar: {
    icon: 'http://www.geocodezip.com/mapIcons/marker_blue.png',

  }
};

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(39.809734, -98.555620),
    zoom: 4

  });
  var infoWindow = new google.maps.InfoWindow();

  // Change this depending on the name of your PHP or XML file
  // downloadUrl('xml/cat_scales.xml', function(data) {
  // var xml = data.responseXML;
  var xml = xmlParse(xmlStr);
  var markers = xml.documentElement.getElementsByTagName('marker');
  Array.prototype.forEach.call(markers, function(markerElem) {
    var id = markerElem.getAttribute('id');
    var name = markerElem.getAttribute('name');
    var address = markerElem.getAttribute('address');
    var city = markerElem.getAttribute('city');
    var state = markerElem.getAttribute('state');
    var zip = markerElem.getAttribute('zip');
    var phone = markerElem.getAttribute('phone');
    var fax = markerElem.getAttribute('fax');
    var manager = markerElem.getAttribute('manager');
    var url = markerElem.getAttribute('url');
    var type = markerElem.getAttribute('type');
    var point = new google.maps.LatLng(
      parseFloat(markerElem.getAttribute('lat')),
      parseFloat(markerElem.getAttribute('lng')));

    var infowincontent = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = name
    infowincontent.appendChild(strong);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = address
    infowincontent.appendChild(text);

    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon

    });


    marker.addListener('click', function() {
      infoWindow.setContent(infowincontent);
      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() {}

google.maps.event.addDomListener(window, 'load', initMap);

function xmlParse(str) {
  if ((typeof ActiveXObject != 'undefined') || ("ActiveXObject" in window)) {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return document.createElement('div', null);
}

var xmlStr = '<?xml version="1.0"?><markers><marker id="461" name="Pilot Travel Center" address="I-20 / 59, Exit 123" city="Birmingham" state="AL" zip="35204" phone="xxx-xxx-xxxx" fax="xxx-xxx-xxxx" manager="Joe" lat="33.529307" lng="-86.852215" url="http://www.pilotflyingj.com" type="restaurant"/><marker id="1402" name="Flying J Travel Plaza" address="Ross Clark Highway / Highway 231" city="Dothan" state="AL" zip="36301" phone="xxx-xxx-xxxx" fax="xxx-xxx-xxxx" manager="Johnny" lat="31.192005" lng="-85.399838" url="http://www.pilotflyingj.com" type="bar"/></markers>';

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;