4

你好：我在我的谷歌地图上取得了进展（见我以前的帖子：谷歌地图 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);
4

2 回答 2

11

感谢@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);
}
于 2013-07-19T02:43:36.613 回答
5

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

}

谷歌地图 API 说：

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

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

于 2013-07-18T18:03:06.033 回答