无法从XML获取标记 [英] Cant get markers from XML

问题描述

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

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

 <！DOCTYPE html> 
< html> 
< head> 
< meta http-equiv =Content-Typecontent =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-typecontent =text / html; charset = utf-8/> 
< title>魔兽世界的Google地图< / title> 
< link rel =stylesheettype =text / cssmedia =allhref =/ style.css/> 
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?sensor=false>< / script> 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js>< / script> 
< script type =text / javascriptsrc =/ 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（）; //保持地图居中正确
}）。resize（）; 
 }）; 
< / script> 
< body> 
< div class =topnav> 
< ul id =navxclass =topnav> 
< li>< a href =/class =current>艾泽拉斯< / a>< / li> 
< li>< a href =/ outland />外域< / a>< / li> 
< li>< a href =/ deepholm /> Deepholm< / a>< / li> 
< li>< a href =/ outland />德拉诺< / a>< / li> 
< / ul> 
< / div> 
< script> 
函数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 =瓷砖坐标图类型; 
 var map; 
 var CustomMapType = new CustomMapType（）; 
 
函数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_canvasstyle =background：＃1B2D33;>< / div> 
< / body> 
< / html> 
  

markers.js：

  // 
 // Google Maps函数
 // 
 
 // Google Maps vars 
 var myLatlng; //添加坐标
 var mapOptions = {} 
 var geocoder; 
 var map; 
 var defaultZoom = 10; 
 var image; 
 var xmlUrl; 
 var infoWindow; 
 var markers; 
 var contactUrl; 
 
 
 
函数downloadUrl（url，callback）{
 var request = window.ActiveXObject？ 
 new ActiveXObject（'Microsoft.XMLHTTP'）：
 new XMLHttpRequest; 
 
 request.onreadystatechange = function（）{
 if（request.readyState == 4）{
 //request.onreadystatechange = doNothing; 
回调（request，request.status）; 
} 
}; 
 
 request.open（'GET'，url，true）; 
 request.send（null）; 
} 
 
函数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 />+ marker [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 [一世] .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）; 
} 
}）; 
 
 
函数bindInfoWindow（marker，map，infoWindow，html）{
 google.maps.event.addListener（marker，'click'，function（）{
 infoWindow.setContent（html）; 
 infoWindow.open（map，marker）; 
}）; 
  

markers.xml：

 <？xml version =1.0encoding =UTF-8？> 
< markers> 
 < / markers> 
  

解决方案

XML中的标记没有属性 markerimage 。

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

  icon：image，
  

I cant get my map to show the markers which I am trying to get out of a XML file. I have tried a number of different tutorials and solutions with no avail, the code below was my last attempt at it before posting here. Here is what I have:

Here is my code: (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>

解决方案

The markers in the XML doesn't have an attribute markerimage.

You must either set this attribute(a path to the desired image) or remove this line:

icon: image,

这篇关于无法从XML获取标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！