Question

我是Google Maps API的新手。

我有一个包含以下内容的XML文件：

              <?xml version="1.0"?>
              -<Customers>-
              <Marker category="Production">
              <title lang="en">Invensys</title>
              <site_location>Neponset Avenue 22, Foxborough, Foxboro, MA, United States</site_location> 

              <cordinantes>42.066817,-71.24814</cordinantes>
              <site_status>Normal</site_status>
     </Marker>
          <Marker category="Production"><title lang="en">Yokogawa Japan</title> 
             <site_location>Shinjuku, Tokyo,Japan</site_location>
             <cordinantes>36.543915,136.629281</cordinantes>             
             <site_status>Critical</site_status>
             </Marker>
             </Customers>

这是包含读取XML文件并将数据输入数组的函数的JS文件，文件名为func.js。

<script src="jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>


    var markers = [];

  $.get('Customers.xml', function(xml) {
  var jsonObj = $.xml2json(xml);
    $.each(jsonObj.Marker, function(){
        var stat = this.site_status == "Critical" ? "redgoogle.png" : "green_marker.png";
        var latlng = new google.maps.LatLng (this.cordinantes);
             var mark = {
                    title:  this.title,
                    location: this.site_location,
                    cord: latlng,
                    icon: stat
                    }
            markers.push(mark);
    });
debugger;
});

此HTML文件包含地图＆amp;应根据“标记”数组的内容生成两个标记。

 <!DOCTYPE html>
 <html>
  <head>
  <title>Simple Map</title>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <style>
     html, body, #map-canvas {
     height: 100%;
     margin: 0px;
     padding: 0px
   }
   </style>
<script src="jquery.xml2json.js" type="text/javascript" language="javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type='text/javascript' src='func.js'></script>
<script>
 markers;   
  var map;
 function initialize() {
  var mapOptions = {
   zoom: 3,
    center: new google.maps.LatLng(32.637929,-16.934395),
   mapTypeId: google.maps.MapTypeId.ROADMAP
 };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
}
       google.maps.event.addDomListener(window, 'load', initialize);
</script>
 </head>
 <body>
   <div id="map-canvas"></div>
   </body>
 </html>

我需要协助使用“markers”数组中的数据才能产生市场。我怎样才能使用markers数组来做到这一点？

提前致谢。

Answer 1

在Initialize函数中执行此操作（如果您确定此时已加载标记）：

for(var i=0; i< markers.length; i++){
    var marker = new google.maps.Marker({ position: markers[i].cord, map:map });
}

如果尚未加载标记，请创建如下函数：

function AddMarkers(){
    for(var i=0; i< markers.length; i++){
        var marker = new google.maps.Marker({ position: markers[i].cord, map:map });
    }
}

并在$.get的回调中调用此函数，如下所示：

 $.get('Customers.xml', function(xml) {
  var jsonObj = $.xml2json(xml);
    $.each(jsonObj.Marker, function(){
        var stat = this.site_status == "Critical" ? "redgoogle.png" : "green_marker.png";
        var latlng = new google.maps.LatLng (this.cordinantes);
             var mark = {
                    title:  this.title,
                    location: this.site_location,
                    cord: latlng,
                    icon: stat
                    }
            markers.push(mark);
    });

    AddMarkers();
    debugger;
});

这将添加您的标记，有关如何生成自定义图标的信息，请参阅

GoogleMaps API Reference
GoogleMaps Icon

您可以完成功能AddMarkers以生成图标，依此类推

Answer 2

XML File: Cities.xml

<Cities>
    <CityName>
      <id>1</id>
      <name>A</name>
      <latitude>40.978989</latitude>
      <longitude>-81.488095</longitude>
    </CityName>
    <CityName>
      <id>2</id>
      <name>B</name>
      <latitude>35.05956</latitude>
      <longitude>-106.80981</longitude>
    </CityName>
</Cities>

HTML：

<div id="map_canvas" style="width:460px;margin-left: 0px; padding: 0px; height:350px; text-align:center;"></div>

Add below script in head section.

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

使用Javascript：

     window.onload = function () {
         if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
             xmlhttp = new XMLHttpRequest();
         }
         else {// code for IE6, IE5
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.open("GET", "Cities.xml", false);
         xmlhttp.send();
         xmlDoc = xmlhttp.responseXML;
         var x = xmlDoc.getElementsByTagName("CityName");

         var mapOptions = {
             center: new google.maps.LatLng(39.8634242, -97.28818149999998),
             zoom: 3,
             mapTypeId: google.maps.MapTypeId.ROADMAP

         };

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

         for (i = 0; i < x.length; i++) {
             var latitudetest = x[i].getElementsByTagName("latitude")[0].childNodes[0].nodeValue;
             var longitudetest = x[i].getElementsByTagName("longitude")[0].childNodes[0].nodeValue;
             var data =  '<div style="min-width:175px;text-align:left; min-height:80px;color:#000000;font-family:arial,sans-serif;font-style:normal; font-size:13px;">' + '<span style="font-weight:bold;font-size:13px;color:#000000;font-family:arial,sans-serif;font-style:normal; ">'+ x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + '</span>' + '</div>';
             var myLatlng = new google.maps.LatLng(latitudetest, longitudetest);
             var bluePin = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/blue-dot.png',
            new google.maps.Size(32, 32),
            new google.maps.Point(0, 0),
            new google.maps.Point(14, 35));
             var pinShadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png',
            new google.maps.Size(59, 32),
            new google.maps.Point(0, 0),
            new google.maps.Point(14, 35));
             var marker = new google.maps.Marker({
                 position: myLatlng,
                 icon: bluePin,
                 shadow: pinShadow,
                 map: map,
                 title: x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
             });
             (function (marker, data) {
                 google.maps.event.addListener(marker, 'click', function (e) {
                     infoWindow.setContent(data);
                     infoWindow.open(map, marker);
                 });
             })(marker, data);
         }
     }
</script>

从外部xml文件创建标记

2 个答案: