使用 XML 的不同谷歌地图自定义标记图像答案

【问题标题】：Different google maps custom marker images using XML使用 XML 的不同谷歌地图自定义标记图像
【发布时间】：2012-04-05 12:13:12
【问题描述】：

大家好！

我将从顶部开始，使用我的 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>

然后我有这样的 php 文件来读取 XML 并在谷歌地图上显示标记（不相关的东西被剥离）：

<?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 .. 我对这个 XML 斗篷有点陌生，有点迷茫！如果有人能指出我正确的方向，我将不胜感激！谢谢！

【问题讨论】：

标签： php xml google-maps

【解决方案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;
}

【讨论】：

太棒了！像魅力一样工作！谢谢！