Googleマップのxmlファイルにデータをマーク

-1

Googleマップにいくつかのデータをマークしたいと思います。私はeclipse Java EEを使用していますが、xmlファイルは同じ作業領域;（workspace_jsp）にあります。Googleマップのxmlファイルにデータをマーク

xmlファイル：

<csv_data> 
<row> 
<time>10:01:43</time> 
<latitude>37.4805016667</latitude> 
<longitude>126.952741667</longitude> 
<pdistance>0.000555</pdistance> 
<totaldistance>0.000555</totaldistance> 
<sectionspray>3343.0</sectionspray> 
</row> 
<row> 
<time>10:01:57</time> 
<latitude>37.4807483333</latitude> 
<longitude>126.952753333</longitude> 
<pdistance>0.027396</pdistance> 
<totaldistance>0.027951</totaldistance> 
<sectionspray>3320.0</sectionspray> 
</row>

私のコードは

<!DOCTYPE html > 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>PHP/MySQL & Google Maps Example</title> 
    <script src="https://maps.googleapis.com/maps/api/js?key=~~~~" 
      type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 

    var customIcons = { 
     restaurant: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' 
     }, 
     bar: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' 
     } 
    }; 

    function load() { 
     var map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(37.466285,126.948366), 
       zoom: 10, 
     mapTypeId: 'roadmap' 
     }); 
     var infoWindow = new google.maps.InfoWindow; 

     // Change this depending on the name of your PHP file 
     downloadUrl("mark_info.xml", function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName("/csv_data/row"); 
     for (var i = 0; i < markers.length; i++) { 
      var time = markers[i].getAttribute("time"); 
      var ss = markers[i].getAttribute("sectionspray"); 
      var pd = markers[i].getAttribute("pdistance"); 
      var td = markers[i].getAttribute("totaldistance"); 
      var point = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("latitude")), 
       parseFloat(markers[i].getAttribute("longitude"))); 
      var html = "<b>" + time + "</b> <br/>" + ss + pd + td; 
      var icon = customIcons[pd] || {}; 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      icon: icon.icon 
      }); 
      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); 
     }); 
    } 

    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 doNothing() {} 

     //]]> 

     </script> 

     </head> 

     <body onload="load()"> 
     <div id="map" style="width: 2500px; height: 1500px"></div> 
     </body> 
</html>

マップは、ブラウザ（IE、クロム）が、マークの上にロードされ、情報ウィンドウます。..何が間違っている
と私はどのように問題を解決することができていますそれ？？助けてください。

出典

2016-05-20 bcomc

あなたのXMLはxml属性としてフォーマットされていません。 getAttributeを使用して検索することはできません。データはXML要素の内容です。私はgeoxml3のnodeValue関数を使用して要素からテキストを取り出します。要素を取得するには、getElementsByTagNameを使用します。要素の配列が1つのみの場合は[0]になります。

var markers = xml.getElementsByTagName('row'); 
    for (var i = 0; i < markers.length; i++) { 
    var time = nodeValue(markers[i].getElementsByTagName("time")[0]); 
    var ss = nodeValue(markers[i].getElementsByTagName("sectionspray")[0]); 
    var pd = nodeValue(markers[i].getElementsByTagName("pdistance")[0]); 
    var td = nodeValue(markers[i].getElementsByTagName("totaldistance")[0]); 
    var point = new google.maps.LatLng(
     parseFloat(nodeValue(markers[i].getElementsByTagName('latitude')[0])), 
     parseFloat(nodeValue(markers[i].getElementsByTagName('longitude')[0]))); 
    var html = "<b>" + time + "</b> <br/>" + ss + pd + td; 
    var icon = customIcons[pd] || {}; 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon.icon 
    }); 
    bindInfoWindow(marker, map, infoWindow, html); 
    }

proof of concept fiddle

コードスニペット：

var map; 
 
var customIcons = { 
 
    restaurant: { 
 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' 
 
    }, 
 
    bar: { 
 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' 
 
    } 
 
}; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var infoWindow = new google.maps.InfoWindow; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var xml = xmlParse(xmlData); 
 
    var markers = xml.getElementsByTagName('row'); 
 
    for (var i = 0; i < markers.length; i++) { 
 
    var time = nodeValue(markers[i].getElementsByTagName("time")[0]); 
 
    var ss = nodeValue(markers[i].getElementsByTagName("sectionspray")[0]); 
 
    var pd = nodeValue(markers[i].getElementsByTagName("pdistance")[0]); 
 
    var td = nodeValue(markers[i].getElementsByTagName("totaldistance")[0]); 
 
    var point = new google.maps.LatLng(
 
     parseFloat(nodeValue(markers[i].getElementsByTagName('latitude')[0])), 
 
     parseFloat(nodeValue(markers[i].getElementsByTagName('longitude')[0]))); 
 
    console.log(point.toUrlValue(6)); 
 
    var html = "<b>" + time + "</b> <br/>" + ss + pd + td; 
 
    var icon = customIcons[pd] || {}; 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: point, 
 
     icon: icon.icon 
 
    }); 
 
    bounds.extend(point); 
 
    bindInfoWindow(marker, map, infoWindow, html); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 

 
function bindInfoWindow(marker, map, infoWindow, html) { 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infoWindow.setContent(html); 
 
    infoWindow.open(map, marker); 
 
    }); 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 

 
function xmlParse(str) { 
 
    if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') { 
 
     var doc = new ActiveXObject('Microsoft.XMLDOM'); 
 
     doc.loadXML(str); 
 
     return doc; 
 
    } 
 

 
    if (typeof DOMParser != 'undefined') { 
 
     return (new DOMParser()).parseFromString(str, 'text/xml'); 
 
    } 
 

 
    return createElement('div', null); 
 
    } 
 
    /** 
 
    * Extract the text value of a DOM node, with leading and trailing whitespace trimmed. 
 
    * 
 
    * @param {Element} node XML node/element. 
 
    * @param {Any} delVal Default value if the node doesn't exist. 
 
    * @return {String|Null} 
 
    */ 
 
var nodeValue = function(node, defVal) { 
 
    var retStr = ""; 
 
    if (!node) { 
 
    return (typeof defVal === 'undefined' || defVal === null) ? null : defVal; 
 
    } 
 
    if (node.nodeType == 3 || node.nodeType == 4 || node.nodeType == 2) { 
 
    retStr += node.nodeValue; 
 
    } else if (node.nodeType == 1 || node.nodeType == 9 || node.nodeType == 11) { 
 
    for (var i = 0; i < node.childNodes.length; ++i) { 
 
     retStr += arguments.callee(node.childNodes[i]); 
 
    } 
 
    } 
 
    return retStr; 
 
} 
 
var xmlData = '<csv_data><row><time>10:01:43</time><latitude>37.4805016667</latitude><longitude>126.952741667</longitude><pdistance>0.000555</pdistance><totaldistance>0.000555</totaldistance><sectionspray>3343.0</sectionspray></row><row><time>10:01:57</time><latitude>37.4807483333</latitude><longitude>126.952753333</longitude><pdistance>0.027396</pdistance><totaldistance>0.027951</totaldistance><sectionspray>3320.0</sectionspray></row>';

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

出典

2016-05-20 06:56:42 geocodezip

あなたのアドバイスをいただき、ありがとうございます。私は約10,000以上のデータを持っています。私はそれらをvar xmlData ..で1つずつ書くことはできません。 – bcomc

これは、この例のXMLをロードするための単なる回避策です。答えの重要な部分は、XMLの解析です。これは、以前の 'downloadUrl'関数と同じ方法でロードします。 – geocodezip

あなたは1）xmlfileをvar xmlにdownloadUrlを使ってロードしますか？var xml = downloadUrl（ '。xml'、callback）2）解析しますか？私は申し訳ありません、それは私の最初の時間であり、私はプログラミング自体がうまくいかず... @ geocodezip – bcomc

Googleマップのxmlファイルにデータをマーク

答えて

関連する問題