jquery - 谷歌地图 API。带有下一个和后退按钮的 infoWindow 可循环显示相同位置的标记信息

Question

我将标记从 XML 文件放置到我的 Google 地图上。然而，一些标记将在准确的位置（纬度和经度）位置，我不知道该怎么做：

这是我当前的 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());
        }
    });
});

有什么建议么？干杯

score 0 · Accepted Answer

试试这样

// 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);
});
}

score 0 · Accepted Answer

不知道有没有人还在寻找这个问题的答案。这是我使用轮播的解决方案。

将所有标记添加到全局变量
绑定信息窗口时检查标记是否与任何现有标记重叠
如果重叠，则单击标记将内容作为轮播附加到当前标记
在标记关闭时将内容字符串重置为原始字符串

这是代码示例

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)">&#10094;</a>' +
            '<a class="next" onclick="plusSlides(1)">&#10095;</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);
        }



    /* 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>

jquery - 谷歌地图 API。带有下一个和后退按钮的 infoWindow 可循环显示相同位置的标记信息

2 回答 2

Related

Reference