将标记从 XML 文件加载到 Google Map API答案

【问题标题】：Loading Markers from XML file to Google Map API将标记从 XML 文件加载到 Google Map API
【发布时间】：2014-02-15 17:23:05
【问题描述】：

我的目标是能够从 sql 数据库加载标记并将它们显示在 googlemap 上。但我很难尝试从 xml 文件中读取标记。

这是我的 HTML 文件

  <!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="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script>


            function initialize() 
            {

              var mapOptions = 
              {
                zoom: 12,
                center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
              };

            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            }

            function loadXMLFile(){
            var filename = 'markers.xml';
            $.ajax({
                type: "GET",
                url: filename ,
                dataType: "xml",
                success: parseXML,
                error : onXMLLoadFailed
            });

            function onXMLLoadFailed(){
            alert("An Error has occurred.");
            }

            function parseXML(xml){
            container = new nokia.maps.map.Container();
            $(xml).find("marker").each(function(){
                //Read the name, address, latitude and longitude for each Marker
                var nme = $(this).find('name').text();
                var address = $(this).find('address').text();
                var lat = $(this).find('lat').text();
                var lng = $(this).find('lng').text();
                var markerCoords = new nokia.maps.geo.Coordinate
                    (parseFloat(lat), parseFloat(lng));    
                container.objects.add(new nokia.maps.map.StandardMarker(
                    markerCoords, {text:nme}));      

            });
            map.objects.add(container);
            map.zoomTo(container.getBoundingBox(), false);
        }


}
            google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

这是我的 xml 文件

<?xml version="1.0"?>
<markers>
    <marker>
         <name>M1</name>
         <address>Abbey Street</address>
         <lat>53.3496</lat>
         <lng>-6.257</lng>
   </marker>
   </markers>

地图正在渲染，但地图上没有出现任何标记。我已经用谷歌搜索了这个问题，但找不到任何有帮助的东西。

【问题讨论】：

标签： mysql xml eclipse google-maps-api-3 google-maps-markers

【解决方案1】：

你没有调用 loadXMLFile()
您没有包含 jquery 库

你没有创建 google.maps.Markers（看起来你有一些诺基亚 API 的语法）。

<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>

var map = null;
function initialize()
{

   var mapOptions =
       {
            zoom: 12,
            center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin
       };

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   loadXMLFile();
 }

 function loadXMLFile(){
    var filename = 'v3_SO_20140124_markers.xml';
    $.ajax({
            type: "GET",
            url: filename ,
            dataType: "xml",
            success: parseXML,
            error : onXMLLoadFailed
    });

  function onXMLLoadFailed(){
    alert("An Error has occurred.");
  }

  function parseXML(xml){
    var bounds = new google.maps.LatLngBounds();
     $(xml).find("marker").each(function(){
            //Read the name, address, latitude and longitude for each Marker
            var nme = $(this).find('name').text();
            var address = $(this).find('address').text();
            var lat = $(this).find('lat').text();
            var lng = $(this).find('lng').text();
            var markerCoords = new google.maps.LatLng(parseFloat(lat), 
                                                      parseFloat(lng));
            bounds.extend(markerCoords);
            var marker = new google.maps.Marker({position: markerCoords, map:map});
        });
        map.fitBounds(bounds);
    }
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

working example

【讨论】：