Google Maps API v3 折线选项卡式 InfoWindow

Question

我在获取选项卡式信息窗口以显示路径时遇到了一些困难。我关注了this tutorial。

我有一个带有折线的 KML 图层（它们是曲线 - 代表地形特征） 并且不知道如何在单击路径时显示信息窗口。我看过一些关于计算中点的教程（但直线）..

我尝试获取路径点的 2 种方法：

var streamPoly = google.maps.Polyline.prototype.getPosition = function() {
return this.getPath().getAt(0);}

var streamPoly = poly.getPath(); 

我的标题中有什么：

var map;
var streamPoly;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(42.687984,-79.394159);

    var mapOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var ctaLayer = new google.maps.KmlLayer({
        url: 'paths.kml'
    });
    ctaLayer.setMap(map);
    ctaLayer.set('preserveViewport', true); 


    var  infoBubble = new InfoBubble({
        maxWidth: 300
    });

    var div = document.createElement('DIV');
    div.innerHTML = 'Hello';

    infoBubble.addTab('Tab 1', div);
    infoBubble.addTab('Tab 2', "<B>This is tab 2</B>");

    google.maps.event.addListener(streamPoly, 'click', function() {
        if (!infoBubble.isOpen()) {
            infoBubble.open(map, streamPoly);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

您不能将 KmlLayer 中的折线作为 google.maps.Polyline 对象访问。要在 KmlLayer 上打开 InfoWindow（或 InfoBubble），您需要向 KmlLayer 添加监听器：

google.maps.event.addListener(ctaLayer, 'click', function(evt) {
        if (!infoBubble.isOpen()) {
            infoBubble.setPosition(evt.latLng);
            infoBubble.open(map);
        }
    });

evt 将是一个KmlLayerMouseEvent，它将包含有关所点击功能的信息