问题：我正在尝试在Google地图的信息窗口中集成滑块（轮播）。
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 );
}
});
});
});
答案 0 :(得分：5)
您实际上是直接在文档上创建DOM元素
你需要使用这样的东西：
infoWindow.setContent('<div id="mySlider"><ul><li>' + userLi1 + '</li><li>' + userLi2 + '</li></ul></div>');
编辑：
这是从我的一个项目修改的完全可用的脚本，以满足您的需求：
$(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="slider2">' + userLi1 + userLi2 + '</ul></div>';
// add listener
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(marker.html);
infowindow.open(map, marker);
});
}
initialize();
// 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 );
}
});
});