将自定义html添加到KML数据的信息窗口 [英] Adding custom html to infowindow of KML data
问题描述
我希望Google地图(geoxml3)专家可以为您提供帮助.我想做的事情实际上非常简单,但是我只是不够熟练地编写代码来完成它.
I am hoping a Google maps (geoxml3) expert may be able to help. What I am trying to do is really quite simple, but i'm just not savvy enough with coding to accomplish it.
我有一个使用google maps api v3和geoxml3的简单地图,其中加载了一些KML数据.
I have a simple map using the google maps api v3 and geoxml3 which loads some KML data.
然后,我有一个自定义生成的侧边栏,它与每个地标相对应.
I then have a custom generated sidebar which corresponds to each placemark.
我只想像下面的示例一样在信息窗口中添加放大和缩小按钮.
I would simply like to add zoom in and zoom out buttons to the infowindow like in the following example.
http://www.geocodezip.com/v3_MW_example_map3_zoom.html
我知道我必须创建一个自定义标记并添加html内容,但是要使其与kml单击配合使用,我遇到了很多麻烦.
I know that I have to create a custom marker and add the html content, but I am having a lot of trouble getting it to work with the kml click.
我还没有尝试过使用自定义标记btw ...
I have not included an attempt at the custom marker btw...
此处示例:
http://webstgcc.onthenet.com.au/map/map.html
到目前为止,我的代码:
My code so far:
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);
花了我相当长的时间才使它起作用,所以如果这真的很简单,请原谅我.
It took me quite a while just to get this to work, so please forgive me if this is really simple stuff.
任何帮助将不胜感激.
推荐答案
向geoXML3.parser()
使用内置函数创建的标记并且仅修改infoWindow的内容的简单方法:
A simple approach that uses the marker created by the built-in function and only modifies the content for the 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;
}
});
这篇关于将自定义html添加到KML数据的信息窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!