Fatal编程技术网
  • javascript/
  • Javascript 向KML数据的信息窗口添加自定义html

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

javascript google-maps

Javascript 向KML数据的信息窗口添加自定义html,javascript,google-maps,geoxml3,Javascript,Google Maps,Geoxml3,我希望谷歌地图（geoxml3）专家能够提供帮助。我试图做的事情其实很简单，但我只是对编码不够精通，无法完成它 我有一个使用GoogleMapsAPIv3和geoxml3加载一些KML数据的简单地图 然后，我有一个自定义生成的边栏，它对应于每个placemark 我只想在信息窗口中添加放大和缩小按钮，如下面的示例所示 我知道我必须创建一个自定义标记并添加html内容，但是我在使用kml单击时遇到了很多麻烦 我还没有包括在自定义标记btw尝试 示例如下： 到目前为止，我的代码是： var ge

我希望谷歌地图（geoxml3）专家能够提供帮助。我试图做的事情其实很简单，但我只是对编码不够精通，无法完成它

我有一个使用GoogleMapsAPIv3和geoxml3加载一些KML数据的简单地图

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

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

我知道我必须创建一个自定义标记并添加html内容，但是我在使用kml单击时遇到了很多麻烦

我还没有包括在自定义标记btw尝试

示例如下：

到目前为止，我的代码是：

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);

var geoXml=null；
var-map=null；
var mylatng=null；
var infowindow=null；
var filename=“KML\u Samples.KML”；
var image=“”；
函数初始化（）{
myLatLng=new google.maps.LatLng（-28.014408153.463898）；
变量myOptions={
缩放：11，
中心：myLatLng，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“谷歌地图”），myOptions）；
infowindow=newgoogle.maps.infowindow（{maxWidth:300}）；
geoXml=新的geoXML3.parser({
地图：地图，
infowindow:infowindow，
singleInfoWindow：对，
标记选项：{icon:image}，
解析后：使用数据
});
parse（文件名）；
};                  
函数kmlClick（标记器）{
google.maps.event.trigger（geoXml.docs[0].markers[marker]，“单击”）；
}
函数使用数据（doc）{
//这里使用doc对象的JSON属性进行地理数据处理
对于（var i=0；i
我花了很长时间才让它工作，所以如果这真的很简单，请原谅我

任何帮助都将不胜感激。

为
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;
  }
});

infowindow=newgoogle.maps.infowindow（{minWidth:250，maxWidth:300}）；
geoXml=新的geoXML3.parser({
地图：地图，
infowindow:infowindow，
单一信息窗口：1，
解析后：使用数据，
createMarker：函数（placemark，doc）{
//从内置的createMarker函数中获取标记
var marker=geoXML3.instances[0].createMarker（placemark，doc）；
//修改内容
if（marker.infoWindow）{
marker.infoWindowOptions.content=
''+placemark.name+
''+placemark.description+''中的“+placemark.description”+
“放大+
“缩小
”+ ''; } 返回标记； } });
感谢您的回复，但是缩放功能不会放大标记，只能放大地图中心。我已经更新了测试页面。有什么想法吗？如果你想放大标记，你必须将中心改为标记，然后改变缩放
map.setCenter（marker.getPosition（））；map.setZoom（map.getZoom（）+1）