需要谷歌地图打开Fancybox的多个标记弹出菜单
Need Google Maps to open Multiple Marker Popups with Fancybox
我正在创建一个带有多个标记的谷歌地图,我想在点击时弹出到Fancybox灯箱中。我必须承认,我在javascript和谷歌地图API方面是个新手。
我已经把一些不同的示例脚本放在一起,并提出了一些实际上可以正常工作的东西。我有我想要的标记(好吧,没有标题……我仍然需要弄清楚),我想要的地图风格,我甚至有标记在点击时弹出灯箱。
但是,所有标记最终都会在灯箱中打开一个URL。我想这有点道理。Fancybox代码正在分发给所有标记,而不是单独分发给每个标记。我试图用一个url进行另一个争论,并将其传递到Fancybox脚本中,但它仍然只是获取最后一个标记的url并将其用于所有标记。如何使URL为每个标记而不是同时为所有标记工作?
我确实在这里发现了一个类似的问题:
多个fancybox谷歌地图
然而,它使用不同的途径来攻击同一个问题。另外,我似乎无法让他们的脚本自己工作,更不用说将其与我的代码集成了。所以,虽然我知道解决方案是如何为他们工作的,但它似乎对我没有帮助
我的代码如下:
var map;
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var featureOpts = [
{
stylers: [
{ hue: '#CCCCCC' },
{ saturation: '-100' },
{ visibility: 'simplified' },
{ gamma: 2 },
{ weight: .4 }
]
},
{
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'water',
stylers: [
{ color: '#efefef' }
]
}
];
var mapOptions = {
zoom: 9,
scrollwheel: false,
keyboardShortcuts: false,
disableDefaultUI: true,
center: new google.maps.LatLng(34.0531553, -84.3615928),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'Custom Style'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
setMarkers(map, schools);
}
var schools = [
['Canton', 34.2352063, -84.4846274, 4, 'popup.htm'],
['Austell', 33.8158106, -84.6334938999999, 3, 'popup.htm'],
['Marietta', 33.9578674, -84.5532791, 2, 'popup.htm'],
['Atlanta', 33.7635085, -84.43030209999999, 1, 'popup2.htm']
];
function setMarkers(map, locations) {
var image = {
url: 'images/fml-home.png',
size: new google.maps.Size(67, 63),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 63)
};
var shadow = {
url: 'images/fml-shadow.png',
size: new google.maps.Size(45, 18),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 18)
};
var shape = {
coord: [1, 1, 1, 67, 60, 67, 60 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var schools = locations[i];
var myLatLng = new google.maps.LatLng(schools[1], schools[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: schools[0],
zIndex: schools[3]
});
var href = schools[4];
google.maps.event.addListener(marker, 'click', function() {
$.fancybox({
frameWidth : 800,
frameHeight : 600,
href : href,
type : 'iframe'
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
试试这个:
marker["href"] = schools[4];
google.maps.event.addListener(marker, 'click', function() {
$.fancybox({
frameWidth : 800,
frameHeight : 600,
href : this.href,
type : 'iframe'
});
});
相关文章:
- 点击打开弹出菜单,在谷歌地图Api中提供详细信息
- 谷歌地图:在下拉菜单中更改地图标记位置
- 谷歌地图:使用菜单设置新的中心点
- 带有复选框的谷歌地图自定义下拉菜单
- 使用jQuery下拉菜单更改谷歌地图图标
- 用菜单个性化谷歌地图
- 粘性菜单被谷歌地图卡住了
- 需要谷歌地图打开Fancybox的多个标记弹出菜单
- 谷歌地图不会出现在模式弹出菜单中
- 子菜单隐藏在谷歌地图后面
- 无法为谷歌地图输入选择下拉菜单选项
- 谷歌地图:放大/缩小与平移到特定点,如maps.google.com上下文菜单
- 如何显示谷歌地图绘制工具时,按下按钮菜单
- 谷歌地图V3上下文菜单
- 下拉菜单在谷歌地图信息窗口
- 引导折叠菜单不显示与谷歌地图
- 融合表谷歌地图第二个Javascript下拉菜单不工作
- 命名下拉菜单-谷歌地图
- 使用JQuery或Javascript选择谷歌地图的下拉菜单
- Onsenui:滑动菜单+谷歌地图