Google地图标记重叠且不可见 [英] Google map markers overlapping and not visible

问题描述

我在使用Google地图脚本时遇到麻烦，在同一位置上的标记重叠并且用户看不见. 我尝试使用此链接中的OverlappingMarkerSpiderfier编辑脚本 https://github.com/jawj/OverlappingMarkerSpiderfier .但是存在重叠的问题.没有改善.

I have trouble with my google map script where the markers on a same location overlapped and not visible to user. I tried to edit my script using OverlappingMarkerSpiderfier available in this link https://github.com/jawj/OverlappingMarkerSpiderfier. But overlapping issue exist.No improvement occured.

<script type="text/javascript">
    var geocoder;
    var map;

    // initializing the map
    function initialize()
    {
        // define map center
        var latlng = new google.maps.LatLng(40.44694705960048,-101.953125);
        // define map options
        var myOptions = 
        {
            zoom: 3,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.MAP,
            scaleControl: true,
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeControl: false,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            }
        };

        // initialize map
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        // add event listener for when a user clicks on the map
        google.maps.event.addListener(map, 'click', function(event) {
            findAddress(event.latLng);
        });
    }

    // finds the address for the given location
    function findAddress(loc)
    {
        geocoder = new google.maps.Geocoder(); 

        if (geocoder) 
        {
            geocoder.geocode({'latLng': loc}, function(results, status) 
            {
                if (status == google.maps.GeocoderStatus.OK) 
                {
                    if (results[0]) 
                    {
                        address = results[0].formatted_address;

                        // fill in the results in the form
                        document.getElementById('lat').value = loc.lat();
                        document.getElementById('long').value = loc.lng();
                        document.getElementById('address').value = address;
                    }
                } 
                else 
                {
                    alert("Geocoder failed due to: " + status);
                }
            });
        }
    }

    // initialize the array of markers
    var markers = new Array();

    // the function that adds the markers to the map
    function addMarkers()
    {
        // get the values for the markers from the hidden elements in the form
        var lats = document.getElementById('lats').value;
        var lngs = document.getElementById('lngs').value;
        var addresses = document.getElementById('addresses').value;
        var names = document.getElementById('names').value;
        var descrs = document.getElementById('descrs').value;
        var photos = document.getElementById('photos').value;
        var user_names = document.getElementById('user_names').value;
        var user_locs = document.getElementById('user_locs').value;

        var las = lats.split(";;")
        var lgs = lngs.split(";;")
        var ads = addresses.split(";;")
        var nms = names.split(";;")
        var dss = descrs.split(";;")
        var phs = photos.split(";;")
        var usrn = user_names.split(";;")
        var usrl = user_locs.split(";;")

        // for every location, create a new marker and infowindow for it
        for (i=0; i<las.length; i++)
        {
            if (las[i] != "")
            {
                // add marker
                var loc = new google.maps.LatLng(las[i],lgs[i]);
                var marker = new google.maps.Marker({
                    position: loc, 
                    map: window.map,
                    title: nms[i]
                });

                markers[i] = marker;

                var contentString = [
                  '<div id="tabs">',
                   '<div id="tab-1">',
                    '<p><span>'+nms[i]+'</span></p>',
                    '<p><img src="./photos/'+phs[i]+'"/></p>'+
                  '</div>',
                    '<div id="tab-3">',
                    '<p><a href="trainer-profile.php?id='+usrn[i]+'"><img src="images/b-line.jpg"/></a></p>',
                  '</div>',
                  '</div>'
                ].join('');

                var infowindow = new google.maps.InfoWindow;

                bindInfoWindow(marker, window.map, infowindow, contentString);
            }
        }
    }

    // make conection between infowindow and marker (the infowindw shows up when the user goes with the mouse over the marker)
    function bindInfoWindow(marker, map, infoWindow, contentString)
    {
        google.maps.event.addListener(marker, 'mouseover', function() {

            map.setCenter(marker.getPosition());

            infoWindow.setContent(contentString);
            infoWindow.open(map, marker);
            $("#tabs").tabs();
         });
    }

    // highlighting a marker
        // make the marker show on top of the others
        // change the selected markers icon
    function highlightMarker(index)
    {
        // change zindex and icon
        for (i=0; i<markers.length; i++)
        {
            if (i == index)
            {
                markers[i].setZIndex(10);
                markers[i].setIcon('http://www.google.com/mapfiles/arrow.png');
            }
            else
            {
                markers[i].setZIndex(2);
                markers[i].setIcon('http://www.google.com/mapfiles/marker.png');
            }
        }
    }

</script>

谢谢.

推荐答案

引用 OverlappingMarkerSpiderfier 和此

这篇关于Google地图标记重叠且不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！