google-maps - Google マップ V3 で複数のマーカーを異なるアイコンで表示する方法

Question

マーカーを配置するデータの XML ファイルを解析しています。現在、単一の画像を使用して場所をプロットしています。私がやろうとしているのは、XML ファイルの値に基づいて別の色のマーカーを設定することです。XML ファイルの例を次に示します。

    <fatalities>
<fatalities yrnum="1" date="2013-01-30" dt="Jan. 30, 2013" time="10:12:00" tz="CST" location="BARTOW" st="GA" deaths="1" intor="1" insvr="0" nrsvr="0" nowatch="0" watch="WT0019" ef="3" h="0" m="1" o="0" p="0" v="0" unk="0" slat="34.342" slon="-84.9527" elat="34.5981" elon="-84.7313"/>
<fatalities yrnum="2" date="2013-02-21" dt="Feb. 21, 2013" time="13:10:00" tz="CST" location="SABINE" st="TX" deaths="1" intor="0" insvr="0" nrsvr="0" nowatch="1" watch="NONE" ef="1" h="0" m="1" o="0" p="0" v="0" unk="0" slat="31.32" slon="-93.97" elat="31.32" elon="-93.98"/>
<fatalities yrnum="3" date="2013-04-11" dt="Apr. 11, 2013" time="10:38:00" tz="CST" location="KEMPER" st="MS" deaths="1" intor="0" insvr="0" nrsvr="0" nowatch="1" watch="NONE" ef="3" h="0" m="0" o="0" p="1" v="0" unk="0" slat="32.63" slon="-88.88" elat="33.42" elon="-88.20"/>
<summary STATE="GA" FATALITIES="1"/>
<summary STATE="MS" FATALITIES="1"/>
<summary STATE="TX" FATALITIES="1"/>
<csummary H="0" M="2" O="0" P="1" V="0" UNK="0"/>
<total TOTAL="3"/>
</fatalities>

その場所に配置するメーカーを決定するために、値は XML ファイル内で ef です。私は何年も Google マップを使用していませんでしたが、ここ 2 週間で再学習しました。多くの例を調べ、ウェブで答えを検索しましたが、実際には何も見つかりませんでした。

ここに、私が設定したテストページへのリンクがあります。使用する必要があるマーカーは下部にあります。単一のマーカーを使用して位置をプロットできますが、XML の ef 値に基づいて別のマーカーを使用しようとすると、何も得られません。基本的に、すべてのマーカーを場所別にプロットする必要があります。XML の ef 値に応じて、特定のカラーマーカーである必要があります。

http://www.mesquiteweather.net/xml/googlemapkt.html

これが私が持っているコードです。

     <script type="text/javascript">
  var infowindow;
  var map;

// start here

    var summary_html = "";
    var csummary_html = "";
    var total_html = "";
    var gmarkers = [];
    var i = 0;
    var j = 0;
    var thisurl = '2013.xml';


  function initialize() {
    var myLatlng = new google.maps.LatLng(32.775833, -96.796667);
    var myOptions = {
      panControl: false,
      zoom: 4,
          mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.RIGHT_TOP
    },
      center: myLatlng,     
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

   function MyLogoControl(controlDiv) {
    controlDiv.style.padding = '5px';
    var logo = document.createElement('IMG');
    logo.src = 'http://www.mesquiteweather.net/images/watermark_MW_GMap.png';
    logo.style.cursor = 'pointer';
    controlDiv.appendChild(logo);

    google.maps.event.addDomListener(logo, 'click', function() {
        window.location = 'http://www.mesquiteweather.net'; 
    });
  }

   var logoControlDiv = document.createElement('DIV');
   var logoControl = new MyLogoControl(logoControlDiv);
   logoControlDiv.index = 0; // used for ordering
   map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);


    downloadUrl(thisurl, function(data) {
      var xml = GXml.parse(data);
          var markers = data.documentElement.getElementsByTagName("fatalities");
          for (var i = 0; i < markers.length; i++) {
          var yrnum = markers[i].getAttribute("yrnum");
          var dt = markers[i].getAttribute("dt");
          var tm = markers[i].getAttribute("time");
          var ef = markers[i].getAttribute("ef");
          var st = markers[i].getAttribute("st");
          var loc = markers[i].getAttribute("location");
          var watch = markers[i].getAttribute("watch");
          var dead = markers[i].getAttribute("deaths");
          var h = markers[i].getAttribute("h");
          var m = markers[i].getAttribute("m");
          var o = markers[i].getAttribute("o");
          var v = markers[i].getAttribute("v");
          var p = markers[i].getAttribute("p");
          var unk = markers[i].getAttribute("unk");

          var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("slat")),
                                  parseFloat(markers[i].getAttribute("slon")));
          var epoint = new google.maps.LatLng(parseFloat(markers[i].getAttribute("elat")),
                                  parseFloat(markers[i].getAttribute("elon")));

          var marker = createMarker(point, yrnum, dt, ef, tm, dead, h, m, o, v, p, unk, loc, st, watch);
          marker.setMap(map);

          var polyline = new google.maps.Polyline({
              path: [point, epoint], 
              strokeColor: lineColor[ef],
              strokeOpacity: 0.8,
              strokeWeight: 2
              });

          polyline.setMap(map);
       }
     });
      }

 var customIcons = {
"-1":                   "/images/icons/mm_1_white.png",
"0":                    "/images/icons/mm_20_white.png",
"1":                    "/images/icons/mm_20_orange.png",
"2":                    "/images/icons/mm_20_green.png",
"3":                    "/images/icons/mm_20_blue.png",
"4":                    "/images/icons/mm_20_red.png",
"5":                    "/images/icons/mm_20_black.png"

};

var lineColor = {
"-1":                   "#FFFFFF",
"0":                    "#FFFFFF",
"1":                    "#FFA500",
"2":                    "#008000",
"3":                    "#0000FF",
"4":                    "#FF0000",
"5":                    "#000000"

};

  function createMarker(point, yrnum, dt, ef, tm, dead, h, m, o, v, p, unk, loc, st, watch) {
    var marker = new google.maps.Marker({position: point, icon: customIcons[ef]});
google.maps.event.addListener(marker, "click", function() {
  if (infowindow) infowindow.close();
  infowindow = new google.maps.InfoWindow({content: location});
  infowindow.open(map, marker);
    });
    return marker;

  }

</script>

どんな助けや提案も素晴らしいでしょう!

-ありがとう！

google-maps - Google マップ V3 で複数のマーカーを異なるアイコンで表示する方法

1 に答える 1

Related

Reference