使用geocodezip的downloadxml.js创建带有xml文件的标记google map api v3

时间:2013-11-13 11:55:38

标签: javascript xml google-maps google-maps-api-3

我正在尝试使用xml文件创建标记,但我找不到解决方案 (加载xml,读取xml)我不知道错误在哪里。

标记没有出现在任何地方或错误的地方。我专注于标记功能来解决它​​标记功能工作正常。我不会对chrome js console感到厌恶

html ; deneme1.co.nf/selcuk.html

xml ; deneme1.co.nf/konya1.xml

例如:<marker lat="37.949615" long="32.496411" name="M1 Tepe AVM" cat="Alışveriş Merkezi" desc="M1 Tepe AVM</a><br><img src="resimler/real.jpg">" ico_wsize="20" ico_hsize="20" ico_wssize="20" ico_hssize="20" ico_icon="icons/supermarket.png"/>

js ; deneme1.co.nf/downloadxml.js

http://www.geocodezip.com/scripts/downloadxml.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>   
   <title>KONYA</title>
       <script type="text/javascript" src="http://www.geocodezip.com/scripts/downloadxml.js"></script>
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>
    <script type="text/javascript"> 
var pnt= new Array();
var mrk=new Array();   
var bilgi=new Array();
var map = null;
var image=new Array();
var msg=new Array();
var name=new Array();

    function yukle() 
    {
    var mapOptions = 
     { 
    center:new google.maps.LatLng(37.95, 32.505),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
     };
var map= new google.maps.Map(document.getElementById("map-canvas"),mapOptions);




downloadUrl("konya1.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
        pnt[i]= new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("long")));
                image[i] = { 
                url: markers[i].getAttribute("ico_icon"),
                size: new google.maps.Size(markers[i].getAttribute("ico_wsize"), markers[i].getAttribute("ico_hsize")),
                origin: new google.maps.Point(0,0),
                anchor: new google.maps.Point(12,16)
                 };
                   var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };

              //icon.iconSize = new GSize(markers[i].getAttribute("ico_wsize"), markers[i].getAttribute("ico_hsize"));
             // gölge ekleme  icon.shadowSize = new GSize(markers[i].getAttribute("ico_wssize"), markers[i].getAttribute("ico_hssize"));
              //icon.iconAnchor = new GPoint(12, 16);
              //icon.image = markers[i].getAttribute("ico_icon");
              //icon.shadow = markers[i].getAttribute("ico_icon");
    var msg=markers[i].getAttribute("desc");
    bilgi[i]=markers[i].getAttribute("cat");


    name[i]=markers[i].getAttribute("name");
    mrk[i]=createMarker(pnt[i],name[i]);
    text2+="<option value=" + i +">" + markers[i].getAttribute("name") + "</option>";


        }
}




);
function createMarker(latlng, name) {
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
      titile: name
        });
}


createMarker(new google.maps.LatLng(37.95, 32.505),"laps");      


}
  google.maps.event.addDomListener(window, 'load', yukle);
//ico_wsize="20" ico_hsize="20" ico_wssize="20" ico_hssize="20" ico_icon="icons/supermarket.png"/>

</script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

1 个答案:

答案 0 :(得分:1)

您的XML无效:

http://deneme1.co.nf/konya1.xml

This page contains the following errors:
error on line 2 at column 62: Unescaped '<' not allowed in attributes values

您必须对特殊字符进行编码,<应为&lt;

<markers>
<marker lat="37.949615" long="32.496411" name="M1 Tepe AVM" cat="Alışveriş Merkezi" desc="M1 Tepe AVM</a><br><img src="resimler/real.jpg">" ico_wsize="20" ico_hsize="20" ico_wssize="20" ico_hssize="20" ico_icon="icons/supermarket.png"/>

应该(至少):

<markers>
<marker lat="37.949615" long="32.496411" name="M1 Tepe AVM" cat="Alışveriş Merkezi" desc="M1 Tepe AVM&lt;/a&gt;&lt;br&gt;&lt;img src="resimler/real.jpg"&gt;" ico_wsize="20" ico_hsize="20" ico_wssize="20" ico_hssize="20" ico_icon="icons/supermarket.png"/>

请参阅迈克威廉姆斯在this page of his Google Maps Javascript API v2 tutorial

中的解释
相关问题