Question

我正在尝试将类别“图片”添加到XML文件中，其中包含使用侧边栏在Google地图上呈现的标记。 XML具有这种结构

marker lat="0" lng="0" html="text" label="sidebar label" image="image.jpg"

我想要的是在每个文本条目旁边的侧边栏标签上添加一个图像，其源由XML上的“图像”字段定义。

此外，我们希望此图片显示在地图气泡上。以下是我们的代码。我不是专家，我的所有测试都失败了。

我将对此提出任何建议或意见表示感谢。谢谢！

<script type="text/javascript"> 
//<![CDATA[
  var side_bar_html = ""; 
  var gmarkers = []; 
  var map = null;

function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
    icon: 'monumento.png',
    position: latlng,
    map: map,
    zIndex: Math.round(latlng.lat()*-100000)<<5
    });

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });

gmarkers.push(marker);
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';

 }

function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {
var myOptions = {
zoom: 17,
center: new google.maps.LatLng(25.777557,-80.15065),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });

  downloadUrl("casas_famosos.xml", function(doc) {
    var xmlDoc = xmlParse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker    
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      var html = markers[i].getAttribute("html");
      var label = markers[i].getAttribute("label");       
      var marker = createMarker(point,label,html);
    }
    document.getElementById("side_bar").innerHTML = side_bar_html;
  });
 }
var infowindow = new google.maps.InfoWindow(
{ 
size: new google.maps.Size(150,50)

});
 //]]>
</script>

Answer 1

当您获得所有其他XML属性时，您可以从XML获取图像，然后将其添加到infowindow中显示的html中，如下所示：

function createMarker(latlng, name, html, image) {
    var contentString = image + html;
    var marker = new google.maps.Marker({
        icon: 'monumento.png',
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
    });

    gmarkers.push(marker);
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + image + name + '<\/a><br>';
}

...

downloadUrl("casas_famosos.xml", function(doc) {
    var xmlDoc = xmlParse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        // obtain the attribues of each marker    
        var lat = parseFloat(markers[i].getAttribute("lat"));
        var lng = parseFloat(markers[i].getAttribute("lng"));
        var point = new google.maps.LatLng(lat,lng);
        var html = markers[i].getAttribute("html");
        var label = markers[i].getAttribute("label");
        var image = '<img src="'+markers[i].getAttribute("image")+'" alt=""/>';      
        var marker = createMarker(point,label,html,image);
    }

请注意，我假设图像与HTML位于同一目录中。如果没有，则必须适当调整生成的img代码。

将图像添加到XML文件并在Google Maps API v3上解析

1 个答案: