Question

我无法让我的地图显示我想要从XML文件中获取的标记。我尝试了许多不同的教程和解决方案但没有用，下面的代码是我在发布之前的最后一次尝试。这就是我所拥有的：

这是我的代码：（Index.html）

<!DOCTYPE html>
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100%; z-index: 0;}
      #gmnoprint {width: auto;}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<title>Google Map of the WoW World</title>
<link rel="stylesheet" type="text/css" media="all" href="/style.css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/markers.js"></script>
<script type="text/javascript">
$(function(){
    initialize();
    $(window).resize(function(){
        $('#map').css('width', $(window).width()+'px');
        $('#map').css('height', ($(window).height()-35)+'px');
        google.maps.event.trigger(map, 'resize');
        hash_init(); // keeps the map centered correctly
    }).resize();
});
</script>
<body>
<div class="topnav">
<ul id="nav" xclass="topnav">
    <li><a href="/" class="current">Azeroth</a></li>
    <li><a href="/outland/">Outland</a></li>
    <li><a href="/deepholm/">Deepholm</a></li>
    <li><a href="/outland/">Draenor</a></li>
</ul>
</div>
<script>
function CustomMapType() {}
CustomMapType.prototype.tileSize = new google.maps.Size(256, 256);
CustomMapType.prototype.maxZoom = 7;
CustomMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('DIV');
  var baseURL = 'http://d1m6g5gl70bc4l.cloudfront.net/';
  baseURL += zoom + '_' + coord.x + '_' + coord.y + '.png';
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.backgroundColor = '#1B2D33';
  div.style.backgroundImage = 'url(' + baseURL + ')';
  return div;
};

CustomMapType.prototype.name = "Custom";
CustomMapType.prototype.alt = "Tile Coordinate Map Type";
var map;
var CustomMapType = new CustomMapType();

function initialize() {
  var mapOptions = {
    minZoom: 2,
    maxZoom: 7,
    isPng: true,
    mapTypeControl: false,
    streetViewControl: false,
    center: new google.maps.LatLng(56.705,-35.200),
    zoom: 3,
    mapTypeControlOptions: {
      mapTypeIds: ['custom', google.maps.MapTypeId.ROADMAP],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }

  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

  map.mapTypes.set('custom', CustomMapType);
  map.setMapTypeId('custom');

    geocoder = new google.maps.Geocoder();
    infoWindow = new google.maps.InfoWindow;
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    xmlUrl = "markers.xml";

    loadMarkers();

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="background: #1B2D33;"></div> 
</body>
</html>

markers.js：

//
// Google Maps functions 
//

// Google Maps vars
var myLatlng; // Add the coordinates
var mapOptions = {}
var geocoder;
var map;
var defaultZoom = 10;
var image;
var xmlUrl;
var infoWindow;
var markers;
var contactUrl;



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 loadMarkers() {
    map.markers = map.markers || []
    downloadUrl(xmlUrl, function(data) {
        var xml = data.responseXML;
        markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var marker_image = markers[i].getAttribute('markerimage');
            var id = markers[i].getAttribute("id");
            var address = markers[i].getAttribute("address1")+"<br />"+markers[i].getAttribute("address2")+"<br />"+markers[i].getAttribute("address3")+"<br />"+markers[i].getAttribute("postcode");
            var image = {
              url: marker_image,
              size: new google.maps.Size(71, 132),
              origin: new google.maps.Point(0, 0),
              scaledSize: new google.maps.Size(71, 132)
            };
            var point = new google.maps.LatLng(
                parseFloat(markers[i].getAttribute("lat")),
                parseFloat(markers[i].getAttribute("lng")));
            var html = "<div class='infowindow'><b>" + name + "</b> <br/>" + address+'<br/></div>';
            var marker = new google.maps.Marker({
              map: map,
              position: point,
              icon: image, 
              title: name
            });
            map.markers.push(marker);
            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);
    });

markers.xml：

    <?xml version="1.0" encoding="UTF-8"?>
<markers>
    <marker id="1" name="Goldshire" address1="Azeroth" address2="info" address3="info" city="info" postcode="info" lat="35.120" lng="33.706" />
</markers>

Answer 1

XML中的标记没有属性markerimage。

您必须设置此属性（所需图像的路径）或删除此行：

icon: image,

无法从XML获取标记

1 个答案: