向KML数据的信息窗口添加自定义html

Adding custom html to infowindow of KML data

本文关键字：窗口 添加 自定义 html 信息窗 信息 KML 数据      更新时间：2023-09-26

我希望谷歌地图(geoxml3)专家可能能够帮助。我想做的事情真的很简单，但我只是没有足够的代码来完成它。

我有一个简单的地图使用谷歌地图api v3和geoxml3加载一些KML数据。

然后，我有一个自定义生成的边栏，对应于每个placemark。

我只想在信息窗口中添加放大和缩小按钮，如下例所示。

http://www.geocodezip.com/v3_MW_example_map3_zoom.html

我知道我必须创建一个自定义标记并添加html内容，但是我有很多麻烦让它与kml单击一起工作。

我还没有尝试使用自定义标记…

例子:

http://webstgcc.onthenet.com.au/map/map.html

我的代码:

var geoXml = null;
var map = null;
var myLatLng = null;
var infowindow = null;
var filename = "KML_Samples.kml";
var image = ""; 
function initialize() {
myLatLng = new google.maps.LatLng(-28.014408,153.463898);
var myOptions = {
    zoom: 11,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googlemap"),myOptions);
infowindow = new google.maps.InfoWindow({maxWidth:300});
geoXml = new geoXML3.parser({
    map: map,
    infowindow: infowindow,
    singleInfoWindow: true,
    markerOptions: {icon: image},
    afterParse: useTheData
});
geoXml.parse(filename);
};                  
function kmlClick(marker) {
    google.maps.event.trigger(geoXml.docs[0].markers[marker],"click");
}
function useTheData(doc){
// Geodata handling goes here, using JSON properties of the doc object
for (var i = 0; i < doc[0].markers.length; i++){}
};
google.maps.event.addDomListener(window, 'load', initialize);

我花了很长时间才让这个工作，所以如果这是真的很简单的东西，请原谅我。

为geoXML3.parser()提供自定义createmarker -函数

一个简单的方法，使用内置函数创建的标记，只修改infoWindow的内容:

infowindow = new google.maps.InfoWindow({minWidth:250, maxWidth:300});
geoXml = new geoXML3.parser({
    map: map, 
    infowindow: infowindow,
    singleInfoWindow: 1,
    afterParse: useTheData,
    createMarker: function (placemark, doc) {
      //get the marker from the built-in createMarker-function
      var marker=geoXML3.instances[0].createMarker(placemark, doc);
      //modify the content
      if(marker.infoWindow){
        marker.infoWindowOptions.content=
        '<div class="geoxml3_infowindow"><h3>' + placemark.name +
        '</h3><div>' + placemark.description + '</div>'+
        '<code onclick="map.setCenter(new google.maps.LatLng'+
          marker.getPosition().toString()+
        ');map.setZoom(map.getZoom()+1);">zoom in</code><br/>'+
        '<code onclick="map.setCenter(new google.maps.LatLng'+
          marker.getPosition().toString()+
        ');map.setZoom(map.getZoom()-1);">zoom out</code>'+
        '</div>';
      }
    return marker;
  }
});
相关文章：