【发布时间】：2012-09-17 18:42:46
【问题描述】：
问题：我正在尝试在谷歌地图的信息窗口中集成一个滑块（轮播）。
1.滑块的 jQuery 代码：
<head>
...
<script src="js/jquery.anythingslider.js"></script>
<script>
// Set up Sliders
// **************
$(function(){
$('#mySlider').anythingSlider({
mode : 'f', // fade mode - new in v1.8!
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
expand : true,
navigationSize : 3, // Set this to the maximum number of visible navigation tabs; false to disable
onSlideBegin: function(e,slider) {
// keep the current navigation tab in view
slider.navWindow( slider.targetPage );
}
});
});
</script>
...
</head>
2。 Html 代码。这是滑块在常规 html 页面中的工作方式：
<div style="width:450px;height:150px;">
<ul id="mySlider"> <!-- id corresponds to id used in Jquery code -->
<li>
Content of Slide 1
</li>
<li>
Content of Slide 2
</li>
<li>
Content of slide 3
</li>
</ul>
</div>
现在，我对 JavaScript 没有太多经验，所以如何让 jquery 代码在信息窗口中可访问。换句话说，我应该把他的滑块代码放在哪里？
编辑： 这是我迄今为止尝试过的，但没有运气
(function() {
// Defining variables that need to be available to some functions
var map, infoWindow;
window.onload = function() {
// Creating a map
var options = {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// Adding a marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.756054, -73.986951),
map: map,
title: 'Click me'
});
google.maps.event.addListener(marker, 'click', function() {
// add some content to userLi1
var userLi1 = '<li>Some awesome content for the 1st list item</li>';
// add some content userLi2
var userLi2 = '<li>Some awesome content for the 2nd list item</li>'
// Check to see if an InfoWindow already exists
if (!infoWindow) {
infoWindow = new google.maps.InfoWindow();
}
// Setting the content of the InfoWindow to the detail map
//infoWindow.setContent(detailDiv);
infoWindow.setContent('<div style = "width:450px;height:150px;"><ul id="mySlider">' + userLi1 + userLi2 + '</ul></div>');
// Opening the InfoWindow
infoWindow.open(map, marker);
});
// initiate slider here
$('#mySlider').anythingSlider({
mode : 'f', // fade mode - new in v1.8!
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
expand : true,
navigationSize : 3, // Set this to the maximum number of visible navigation tabs; false to disable
onSlideBegin: function(e,slider) {
// keep the current navigation tab in view
slider.navWindow( slider.targetPage );
}
});
};
})();
当我运行代码时，Jquery 根本不会被触发。
编辑 2：解决方案我通过使用 McMaster 代码并将相关的 jquery 代码包装起来解决了这个问题
google.maps.event.addListener(infowindow, 'domready', function(){
});
这是完整的代码：
$(document).ready(function() { // runs jquery when document is ready
function initialize() {
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, {
zoom: 3,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
infowindow = new google.maps.InfoWindow({
content: "holding..."
});
// looks for map, when tiles are loaded, fire function addmarkers
google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
}
function addMarkers() {
var lat =37.09;
var lng = -95-71;
var latLng = new google.maps.LatLng(
lat,
lng);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
// add some content to userLi1
var userLi1 = '<li>Some awesome content for the 1st list item</li>';
// add some content userLi2
var userLi2 = '<li>Some awesome content for the 2nd list item</li>'
// set marker content
marker.html = '<div style = "width:450px;height:150px;"><ul id="mySlider">' + userLi1 + userLi2 + '</ul></div>';
// add listener
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(marker.html);
infowindow.open(map, marker);
});
}
initialize();
google.maps.event.addListener(infowindow, 'domready', function(){
// initiate slider here
$('#mySlider').anythingSlider({
mode : 'f', // fade mode - new in v1.8!
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
expand : true,
navigationSize : 3, // Set this to the maximum number of visible navigation tabs; false to disable
onSlideBegin: function(e,slider) {
// keep the current navigation tab in view
slider.navWindow( slider.targetPage );
}
});
});
});
【问题讨论】：
-
+1 为 google.maps.event.addListener(infowindow, 'domready', function(){ });
标签： javascript jquery google-maps