Javascript Maps API v3：新信息窗口，带像素偏移量，带KML数据。

你好：我在谷歌地图上取得了进展（见我之前的帖子：），但我现在陷入困境，希望得到帮助

我的自定义样式地图来自一个KML文件，其中包含大约20个地点标记

出于设计原因，我希望我的位置标记在锚点的右侧打开，而不是默认的顶部/中心。我试图寻找一个简单的方法来做这件事，但徒劳无功；最接近我的是：，我不能让它为我工作

下面是我正在寻找的一个例子：（它的信息窗口向右打开）

我想我需要取消默认的信息窗口，创建自己的提取KML数据的窗口，然后为我的自定义信息窗口指定一个像素偏移量，但我不知道怎么做

提前谢谢你

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

---

安提拉特在标记右侧的信息窗口中发布了相关信息：

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

---

编辑：这里有一个例子。显然，您希望在页面上包含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， 它传递以下信息： 位置表示定位此KML功能的信息窗口的纬度/经度坐标。这个职位通常是 多边形、多段线和地面覆盖的单击位置，但 标记的真正来源。 pixelOffset表示从上述位置到定位信息窗口“尾部”的偏移量。对于多边形对象，此偏移量通常为 0,0但对于标记，则包括标记的高度。 featureData包含KmlFeatureData的JSON结构

---

有关更多信息，请参见本页：

感谢@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);
}

google.maps.event.addListener（ctaLayer，'click'，函数（kmlEvent）{
showInContentWindow（kmlEvent.latLng、kmlEvent.featureData.description）；
});
函数showInContentWindow（位置、文本）{
var content=“”+文本+”；
var infowindow=new google.maps.infowindow({
内容:内容,，
职位:职位,，
pixelOffset：新的google.maps.Size（300,0），
})
打开（地图）；
}

感谢您的回复。我知道他/她使用了InfoBox脚本，但是是手动创建了一个标记——不是从KML中提取的——所以我不认为这适用。为什么数据来自哪里很重要？只需对KML数据使用InfoBox脚本。请参阅上面我的答案中的编辑。谢谢@SeanKendle。您能进一步解释这部分吗--var text=kmlEvent.featureData.description；//更改此选项以指向信息框中所需的数据----数据来自KML文件，但我如何指定它？谢谢@SeanKendle。我现在明白了，虽然代码出了问题，因为它正在破坏地图。现在试着看看如何调用Infobox。代码似乎不起作用，但我敢打赌它只是缺少了一些小东西。有人吗？你的问题是什么？既然我的回答帮助了你，你能接受并投票吗？谢谢