javascript Maps API v3：新的 InfoWindow，带有 pixelOffset，带有来自 KML 的数据。
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17730657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Maps API v3: New InfoWindow, with pixelOffset, w/ data from KML.
提问by SPS
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.
您好：我在 Google 地图上取得了进展（请参阅我之前的帖子：Google Maps API v3 上缺少 KML 标记：出了什么问题？），但我现在卡住了，希望得到帮助。
My custom-styled map pulls from a KML file with about 20 Placemarks.
我的自定义样式地图从包含大约 20 个地标的 KML 文件中提取。
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.
出于设计原因，我希望我的地标在锚点的右侧打开，而不是默认的顶部/中心。我曾尝试寻找一种简单的方法来做到这一点，但徒劳无功；最接近我来的是：在选择另一个KML层时，问题剩余的Infowindows - Google地图API V3，我无法对我来说有效。
Here is an example of what I'm looking for: http://nationaltreasures.aircanada.com/(its InfoWindows open to right).
这是我正在寻找的示例：http: //nationaltreasures.aircanada.com/（其 InfoWindows 向右打开）。
I thinkI 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.
我想我需要抑制默认的 InfoWindow，创建我自己的拉 KML 数据，然后为我的自定义 InfoWindow 指定一个 pixelOffset，但我不知道如何去做。
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);
回答by SPS
Thanks to @SeanKendle for pointing me in the right direction. Found more or less what I wanted by adding this into my original code.
感谢@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);
}
回答by Sean Kendle
antyrat posted about this with an infoWindow to the right of the marker here:
antyrat 在此处标记右侧的信息窗口中发布了有关此内容的信息：
See the link in the accepted answer.
请参阅已接受答案中的链接。
EDIT: 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:
编辑：这是一个例子。显然，您希望在页面上包含 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 says:
谷歌地图 API 说：
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 要素会生成 KmlMouseEvent，该事件会传递以下信息： position 表示要锚定此 KML 要素的 InfoWindow 的纬度/经度坐标。此位置通常是多边形、折线和 GroundOverlays 的单击位置，但它是标记的真正原点。pixelOffset 表示从上述位置到锚定信息窗口“尾部”的偏移量。对于多边形对象，此偏移量通常为 0,0，但对于标记，则包括标记的高度。featureData 包含 KmlFeatureData 的 JSON 结构。
See this page for more info: KML Feature Details
有关详细信息，请参阅此页面：KML 功能详细信息
