Maps API v3：新的InfoWindow，带有pixelOffset，带有来自KML的数据。 [英] Maps API v3: New InfoWindow, with pixelOffset, w/ data from KML.

问题描述

您好：我在Google地图上取得了进展（请参阅我的上一篇文章： KML标记在Google Maps API v3上缺失：出了什么问题？），但我现在被卡住了，希望得到帮助。

Hello: I'm making progress on my Google Map (see my previous post: KML markers missing on Google Maps API v3: What's wrong?), but I'm now stuck, and hoping for help.

我的自定义样式的地图从包含约20个地标的KML文件中提取。

My custom-styled map pulls from a KML file with about 20 Placemarks.

出于设计原因，我希望我的地标可以在RIGHT锚的一侧，而不是默认的顶部/中心。我尝试过徒劳地寻找一个简单的方法来做到这一点;离我最近的是：问题当另一个KML图层被选中时，infowindows保持活动状态 - Google Maps API V3 ，我无法为之工作。

For design reasons, I want my Placemarks to open on the RIGHT side of the anchor, rather than the default top/center. I've tried searching in vain for a simple way to do this; closest I've come is: Issue with infowindows remaining active when another KML layer is selected - Google Maps API V3, which I can't make work for me.

以下是一个示例我在找什么： http://nationaltreasures.aircanada.com/ （它的InfoWindows向右开放）。

Here is an example of what I'm looking for: http://nationaltreasures.aircanada.com/ (its InfoWindows open to right).

我需要禁用默认的InfoWindow，创建自己的KML数据，然后为我的自定义InfoWindow指定一个pixelOffset ，但我不知道该怎么做。

I think I need to supress the default InfoWindow, create my own that pulls the KML data, and then specify a pixelOffset to my custom InfoWindow, but I can't figure out how to do it.

预先感谢您！

Thank you in advance!

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

推荐答案

antyrat在infoWindow这里的标记：

antyrat posted about this with an infoWindow to the right of the marker here:

Googlemap自定义信息流

查看接受答案中的链接。

See the link in the accepted answer.

编辑：这是一个例子。显然你会想在你的页面上包含InfoBox.js来访问该插件。我希望这能起作用，我没有对它进行测试，但它可能会指向正确的方向：

Here's an example. Obviously you will want to include InfoBox.js on your page to get access to that plugin. I hope this works, I didn't test it, but it might point you in the right direction:

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说：

Google Maps API says:

另外，点击KML功能会生成一个KmlMouseEvent，
，它传递以下信息：
position表示经纬度坐标为此KML功能锚定InfoWindow。这个位置通常是多边形，多义线和GroundOverlay的点击位置，但
是标记的真正原点。
pixelOffset指示从上述位置偏移InfoWindow尾部的偏移量。对于多边形对象，此偏移量通常为
0,0，但对于标记，则包括标记的高度。
featureData包含一个KmlFeatureData的JSON结构。

Additionally, a click on a KML feature generates a KmlMouseEvent, which passes the following information: position indicates the latitude/longitude coordinates at which to anchor the InfoWindow for this KML feature. This position is generally the clicked location for polygons, polylines, and GroundOverlays, but the true origin for markers. pixelOffset indicates the offset from the above position to anchor the InfoWindow "tail." For polygonal objects, this offset is typically 0,0 but for markers includes the height of the marker. featureData contains a JSON structure of KmlFeatureData.

有关详细信息，请参阅此页面： KML功能详情

See this page for more info: KML Feature Details

这篇关于Maps API v3：新的InfoWindow，带有pixelOffset，带有来自KML的数据。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！