我将标记从XML文件放置到我的Google地图上。但是，有些标记将位于确切的位置（经度和纬度），我想知道是否可以单击顶部的标记，打开infoWindow并具有下一个按钮，以循环浏览同一标记中的每个标记的xml数据。位置，我不知道该如何处理：
这是我当前的js，用于放置标记并创建infoWindow
var customIcons = {
been: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
going: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 3,
mapTypeId: 'roadmap',
mapTypeControl: false
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
infoWindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("markers.php", function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var customer = markers[i].getAttribute("customer");
var type = markers[i].getAttribute("type");
var visit_date = markers[i].getAttribute("visit_date");
var comments = markers[i].getAttribute("comments");
var image = markers[i].getAttribute("image");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
var html = "<div class=\"information\"><div class=\"thumb\"></div><span class=\"name\">" + name + "</span><span class=\"customer\"><b>Customer Name:</b> " + customer + "</span><br /><b>Address:</b> " + address + "<br /><span class=\"date\"><b>Visit Date:</b> " + visit_date + "</span><br /><span class=\"comments\"><img src=\"images/oq.png\" />" + comments + "<img src=\"images/cq.png\" /></span><img src=\'" + image + "'\" class=\"image\" /><div>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
$(document).ready(function () {
$(".date-pick").glDatePicker({
onChange: function (target, newDate) {
target.val(
newDate.getFullYear() + "/" + (newDate.getMonth() + 1) + "/" + newDate.getDate());
}
});
});
有什么建议吗？干杯
尝试这样
// these variables are global variables
var infoWindow;
var map;
// Change this depending on the name of your PHP file
downloadUrl("markers.php", function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var customer = markers[i].getAttribute("customer");
var type = markers[i].getAttribute("type");
var visit_date = markers[i].getAttribute("visit_date");
var comments = markers[i].getAttribute("comments");
var image = markers[i].getAttribute("image");
var point = new google.maps.LatLng(
markers[i].getAttribute("lat"),markers[i].getAttribute("lng"));
var html = "<div class=\"information\"><div class=\"thumb\"></div><span class=\"name\">" + name + "</span><span class=\"customer\"><b>Customer Name:</b> " + customer + "</span><br /><b>Address:</b> " + address + "<br /><span class=\"date\"><b>Visit Date:</b> " + visit_date + "</span><br /><span class=\"comments\"><img src=\"images/oq.png\" />" + comments + "<img src=\"images/cq.png\" /></span><img src=\'" + image + "'\" class=\"image\" /><div>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, html);
}
});
}
function bindInfoWindow(marker, html) {
google.maps.event.addListener(marker, 'click', function () {
if (infowindow) {
infowindow.close();
}
infowindow = new google.maps.InfoWindow(
{
content: html
});
infoWindow.open(map, marker);
});
}
我不知道是否有人还在寻找这个问题的答案。这是我使用轮播的解决方案。
这里是代码示例
var markers = [];
var markerContentString = null;
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 3,
mapTypeId: 'roadmap',
mapTypeControl: false
});
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
infoWindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("markers.php", function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var customer = markers[i].getAttribute("customer");
var type = markers[i].getAttribute("type");
var visit_date = markers[i].getAttribute("visit_date");
var comments = markers[i].getAttribute("comments");
var image = markers[i].getAttribute("image");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
var html = "<div class=\"information\"><div class=\"thumb\"></div><span class=\"name\">" + name + "</span><span class=\"customer\"><b>Customer Name:</b> " + customer + "</span><br /><b>Address:</b> " + address + "<br /><span class=\"date\"><b>Visit Date:</b> " + visit_date + "</span><br /><span class=\"comments\"><img src=\"images/oq.png\" />" + comments + "<img src=\"images/cq.png\" /></span><img src=\'" + image + "'\" class=\"image\" /><div>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
_content: html //Add html content to _content
});
markers.push(marker); //Add markers to array
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
var overlappingMarkers = getOverlappingMarkers(marker); //Check if current marker overlps with any of the existing markers
if (overlappingMarkers.length > 0) {
for (var i = 0; i < overlappingMarkers.length; i++) {
overlappingMarkers[i].label = {
text: overlappingMarkers.length,
color: 'white'
}; //Add count of marker at that ocation as label
}
}
google.maps.event.addListener(marker, 'click', function () {
markerContentString = html; //Save content string of maker to a global variable
var appentedContentString = null;
if (overlappingMarkers.length > 1) {
appentedContentString = '<div class="slideshow-container">';
for (var i = overlappingMarkers.length - 1; i >= 0; i--) {
var style = i === overlappingMarkers.length - 1 ? 'style="display:block;"' : "";
appentedContentString += '<div class="mySlides fade" ' + style + '>' +
overlappingMarkers[i]._content +
'</div>';
}
appentedContentString += '<a class="prev" onclick="plusSlides(-1)">❮</a>' +
'<a class="next" onclick="plusSlides(1)">❯</a>' +
'</div>' +
'<br>' +
'<div style="text-align:center">';
for (var i = 0; i < overlappingMarkers.length; i++) {
var className = i === 0 ? "dot active" : "dot";
var newSlide = i + 1;
appentedContentString += '<span class="' + className + '" onclick="currentSlide(' + newSlide + ')"></span> ';
}
appentedContentString += '</div>';
}
var infoContent = appentedContentString == null ? markerContentString : appentedContentString;
infowindow.setContent(infoContent);
infowindow.open(map, marker);
showSlides(1);
//Resetting content on closing infowindow
google.maps.event.addListener(infowindow, 'closeclick', function () {
imageInfo.content = markerContentString;
markerContentString = null;
});
});
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (!slides || slides.length < 1) return;
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
function getOverlappingMarkers(marker) {
var overlappingMarkers = [];
for (i = 0; i < markers.length; i++) {
if (markers[i].getPosition().lat() == marker.getPosition().lat() &&
markers[i].getPosition().lng() == marker.getPosition().lng()) {
overlappingMarkers.push(markers[i]);
}
}
return overlappingMarkers;
}
现在在样式部分中添加以下内容
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
.mySlides {
display: none;
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 45%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
</style>