0

こんにちは、元気な皆さん！

XML ファイルを使用して、一番上から始めます。次のようにレイアウトされた XML があります。

<?xml version="1.0" encoding="UTF-8"?>
<markers>
 <watersource>
  <marker name="Large private dam - Plenty of water. Access from whatever Rd." lat="-35.844630" lng="146.313416" type="1"/>
 </watersource>  
 <watersource>  
  <marker name="Small water tank with fire fighting fittings - Plenty of water. Access from whatever Rd." lat="-35.844630" lng="146.313416" type="1"/>
  </watersource>  
</markers>

次に、XML を読み取り、Google マップにマーカーを表示するために、次のような php ファイルを作成します (無関係なものは削除されます)。

<?php

{
?>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
  var infowindow;
  var map;

  function initialize() {
    var myLatlng = new google.maps.LatLng(-37.855677, 145.316076);
    var myOptions = {
      zoom: 13,
      center: myLatlng,
     disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


    downloadUrl("watersourcedata.xml", function(data) {
      var markers = data.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
        var marker = createMarker(markers[i].getAttribute("name"), latlng);
       }
     });
      }


 var image = 'images/watersource.png';


  function createMarker(name, latlng) {
    var marker = new google.maps.Marker({position: latlng, map: map, icon: image});
google.maps.event.addListener(marker, "click", function() {
  if (infowindow) infowindow.close();
  infowindow = new google.maps.InfoWindow({content: name});
  infowindow.open(map, marker);
    });
    return marker;
  }


    </script>
    </head>
    <body onload="initialize()">


    <FONT SIZE="2">NOTE: Water Source Map Is Under Construction.<BR>
    This map once completed will allow brigades to make and maintain a map of major water sources like dams, wells, tanks ect. in their local areas.<BR>

    <BR>
    Watersource Legend:<BR>
    A creek, dam, river, pond ect.(drafting needed) = <img src='images/watersource.png'> <BR>
    A water tank, pump ect (drafting NOT needed) = <img src='images/waterwellpump.png'>
<BR>
</FONT>

<div id="map_canvas" style="width:950px; height:450px;"></div>


<?
}

?>

これで問題なく動作しますが、XML には型があります。タイプ 1 (watersource.png) とタイプ 2 (waterwellpump.png)。私がする必要があるのは、それが XML 表示マップ マーカー イメージ 1 のタイプ 1 である場合です。タイプ 2、マーカー イメージ 2.. 誰かが私を正しい方向に向けることができれば、私は最も感謝しています! ありがとう！

4

1 に答える 1

1

マーカーを作成するための情報を送信するときは、このように画像タイプを送信します

createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("type"));

createMarker 関数でそれを変更して、選択する画像を決定します。

function createMarker(name, latlng, type) {
if(type == 1)
  image = 'images/watersource.png';
else
  image = 'images/waterwellpump.png';

var marker = new google.maps.Marker({position: latlng, map: map, icon: image});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
});
return marker;
}
于 2012-04-05T12:22:42.590 に答える