Maps API v3:新的InfoWindow,带有pixelOffset,带有来自KML的数据.

Question

您好:我在Google地图上取得了进展(请参阅我以前的帖子:Google Maps API v3上缺少KML标记:出了什么问题？),但我现在卡住了,希望能得到帮助.

我的自定义样式地图来自一个包含大约20个地标的KML文件.

出于设计原因,我希望我的地标在锚点的右侧打开,而不是默认的顶部/中心.我试着用一种简单的方法来寻找这个; 我最接近的是:当选择另一个KML图层时,infowindows保持活动状态的问题 - Google Maps API V3,我无法为我工作.

以下是我正在寻找的一个例子:http://nationaltreasures.aircanada.com/(其InfoWindows向右开放).

我想我需要压缩默认的InfoWindow,创建我自己的拉取KML数据,然后为我的自定义InfoWindow指定pixelOffset,但我无法弄清楚如何做到这一点.

先感谢您!

function initialize() {

var styles = [   ]; // Styles removed to simplify code

var styledMap = new google.maps.StyledMapType(styles,
    {name: "HEPAC"});

var mapOptions = { 
    zoom: 7,
    center: new google.maps.LatLng(46.69504, -67.69751),
    panControl: false,
        mapTypeControl: false,
        streetViewControl: false,
    noClear: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    mapTypeControlOptions: {
        mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
    }
    };                

google.maps.visualRefresh = true;  

var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);

var ctaLayer = new google.maps.KmlLayer({
    url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
    preserveViewport: true,
        });

ctaLayer.setMap(map);        

} 

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

Answer 1

感谢@SeanKendle指出我正确的方向.通过将其添加到我的原始代码中,或多或少找到了我想要的内容.

  google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
    showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
     });

 function showInContentWindow(position, text) {
    var content = "<div>" + text +  "</div>";
    var infowindow = new google.maps.InfoWindow({
    content: content, 
    position: position,
    pixelOffset: new google.maps.Size(300, 0),
     })
 infowindow.open(map);
}

Answer 2

antyrat在这里用标记右侧的infoWindow发布了这个:

Googlemap自定义信息窗口

请参阅接受的答案中的链接.

编辑:这是一个例子.显然,您需要在页面上包含InfoBox.js才能访问该插件.我希望这有效,我没有测试它,但它可能会指向正确的方向:

function initialize() {

    var styles = [   ]; // Styles removed to simplify code

    var styledMap = new google.maps.StyledMapType(styles,
        {name: "HEPAC"});

    var mapOptions = { 
        zoom: 7,
        center: new google.maps.LatLng(46.69504, -67.69751),
        panControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        noClear: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        mapTypeControlOptions: {
            mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
        }
    };                

    google.maps.visualRefresh = true;  

    var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');

    var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
    map.setOptions(opt);

    var ctaLayer = new google.maps.KmlLayer({
        url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
        preserveViewport: true,
    });

    ctaLayer.setMap(map);   

    google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
        var text = kmlEvent.featureData.description; // ALTER THIS TO POINT TO THE DATA YOU WANT IN THE INFOBOX
        var infoBox = new InfoBox({content: text, latlng: kmlEvent.position, map: map});
    });     

}

Google Maps API说:

此外,单击KML要素会生成KmlMouseEvent,它会传递以下信息:position表示将InfoWindow锚定到此KML要素的纬度/经度坐标.此位置通常是多边形,折线和GroundOverlays的单击位置,但是标记的真正原点.pixelOffset指示从上面的位置偏移以锚定InfoWindow"tail".对于多边形对象,此偏移通常为0,0但对于标记,则包括标记的高度.featureData包含KmlFeatureData的JSON结构.

有关详细信息,请参阅此页面:KML功能详细信息