jQuery Google 地图自定义信息框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15165007/
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
Google Maps custom infobox
提问by egr103
I'm trying to incorporate a custom infobox as per this example but my code just doesn't work. Could someone take a look and see where I'm going wrong?
我正在尝试按照此示例合并自定义信息框，但我的代码不起作用。有人可以看看我哪里出错了吗？
I've commented where the example code begins/ends and where I'm trying to call it.
我已经评论了示例代码的开始/结束位置以及我试图调用它的位置。
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(52.204872,0.120163),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles,
scrollwheel: false
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var sites = [
// List all locations for each pin
['The Frontroom', 52.202977,0.138938, 1, '<p>The Frontroom. <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600</p>'],
];
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4],
icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-pin.png"
});
// Begin example code to get custom infobox
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
// end example code for custom infobox
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
// Call myOptions when marker is clicked and opened
infowindow.open(map, myOptions, this);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
回答by geocodezip
Remove this portion of your existing code as well:
删除现有代码的这一部分：
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
// Call myOptions when marker is clicked and opened
infowindow.open(map, myOptions, this);
});
Replace it with this from the InfoBox example:
将其替换为 InfoBox 示例中的：
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, "click", function (e) {
ib.open(map, this); // change the map variable appropriately
});
for multiple points, use function closure (a createMarker function) to maintain the association between the marker and the infoBox:
对于多个点，使用函数闭包（一个 createMarker 函数）来维护标记和信息框之间的关联：
function createMarker(site, map){
var siteLatLng = new google.maps.LatLng(site[1], site[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: site[0],
zIndex: site[3],
html: site[4] /* ,
icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-pin.png" this icon no longer available */
});
// Begin example code to get custom infobox
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = marker.html;
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/examples/tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
// end example code for custom infobox
google.maps.event.addListener(marker, "click", function (e) {
ib.close();
ib.setOptions(myOptions);
ib.open(map, this);
});
return marker;
}
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
createMarker(markers[i], map);
}
}
回答by nicholasnet
Please make sure that thishave property html or not. Since it refers to marker at that time.
请确保这是否具有 html 属性。因为它指的是当时的标记。
google.maps.event.addListener(marker, "click", function ()
{
infowindow.setContent(this.html);
// Call myOptions when marker is clicked and opened
infowindow.open(map, myOptions, this);
});
Also try to limit your globals. Please try this Fiddleonce.
还要尝试限制您的全局变量。请尝试一次这个小提琴。
回答by Ankit
Alright than get inbox.js file from http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/include in your html/jsp. You need to remove infowindow object from your code too
好吧，比从http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/获取 inbox.js 文件包含在您的 html/jsp 中。您也需要从代码中删除 infowindow 对象
and modify your code with
并修改您的代码
function setMarkers(map, markers) {
......// same as your code
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, "click", function (e) {
ib.open(map, this);
});
.....//same as your code
}
If you won't succeed first time than we may need to try few times. Please post your modified code with result every time.
如果您第一次没有成功，我们可能需要尝试几次。请每次都发布带有结果的修改后的代码。
