allow user to move marker position back (z-index?)

2019-01-20 17:52发布

站内问答 / JavaScript
1365 1 5

I would like to allow user to be able to move order of custom google maps marker on a click inside an InfoWindow. This is to overcome issue of overlapping markers. I have considered other solutions (move lat/lon, marker clusters, "spider markers").

enter image description here

My code has 2 issues: 1) jquery listener not working 2) but more important how to implementing change of z-index (or other technique?) and redisplay.

<!DOCTYPE html>
<html>
  <head>

    <style>
    #map-canvas, #side-bar {        
    height: 500px;
    width: 600px;        
    }

    </style>
    <script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>           
    <script src="../jquery/jquery.js" type="text/javascript"></script> 
    <script type="text/javascript">


// scoping for jquery
$( document ).ready(function() {

        "use strict";

        // variable to hold a map
        var map;

        // variable to hold current active InfoWindow
        var activeInfoWindow ;      

        // ------------------------------------------------------------------------------- //
        // initialize function      
        // ------------------------------------------------------------------------------- //
          function initialize() {

            // ------------------------------------------------------------------------------- //
            // LISTENER ON CLICK EVENT
            // ------------------------------------------------------------------------------- //
            $( "a" ).on( "click", function() {              
                alert("got here!");
                // do something to change z-index of this marker
                //...
                // my_index = my_index-1; 
                //...
                return false;
            });

            // map options - lots of options available here 
            var mapOptions = {
              zoom : 5,
              draggable: true,
              center : new google.maps.LatLng(44.960, -93.100),
              mapTypeId : google.maps.MapTypeId.ROADMAP
            };

            // create map in div called map-canvas using map options defined above
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            // define two Google Map LatLng objects representing geographic points
            var stPaul          = new google.maps.LatLng(44.95283,-93.08925);
            var minneapolis     = new google.maps.LatLng(44.97984,-93.26620);

            // place two markers
            fnPlaceMarkers(stPaul,"St Paul");
            fnPlaceMarkers(minneapolis,"Minneapolis");          
          }


        // ------------------------------------------------------------------------------- //
        // create markers on the map
        // ------------------------------------------------------------------------------- //
        function fnPlaceMarkers(myLocation,myCityName){

            var marker = new google.maps.Marker({
                position : myLocation
            });

            // Renders the marker on the specified map
            marker.setMap(map); 

            // create an InfoWindow
            var infoWnd = new google.maps.InfoWindow();         

            // add content to your InfoWindow
            infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' +  myCityName + '<br/><a href="#">Click</a> to move this marker to the back</div>');

            // add listener on InfoWindow - close last infoWindow  before opening new one 
            google.maps.event.addListener(marker, 'click', function() {

                //Close active window if exists - [one might expect this to be default behaviour no?]               
                if(activeInfoWindow != null) activeInfoWindow.close();

                // Open InfoWindow
                infoWnd.open(map, marker);

                // Store new open InfoWindow in global variable
                activeInfoWindow = infoWnd;
            });                             
        }


        // ------------------------------------------------------------------------------- //
        // initial load
        // ------------------------------------------------------------------------------- //       
        google.maps.event.addDomListener(window, 'load', initialize);

});  // end query


    </script>
        <div id="map-canvas"></div>
  </body>
</html>

1条回答
Anthone
2楼-- · 2019-01-20 18:32

  1. set zIndex for all the markers (otherwise it is not defined), good value is (latitude * -100000) << 5 (from Mike Williams in ancient history)

    var marker = new google.maps.Marker({
    position: myLocation,
    zIndex: Math.round(myLocation.lat()*-100000)<<5
});

  2. keep references to all your markers (array markers)

    markers.push(marker);

  3. decrement zIndex by -100000 when the link is clicked.

working fiddle

code snippet:

function setMarkerBack(i) {
  var currentZ = markers[i].get('zIndex');
  markers[i].set('zIndex', currentZ - 100000);
}
var markers = [];

// scoping for jquery
$(document).ready(function() {

  "use strict";

  // variable to hold a map
  var map;

  // variable to hold current active InfoWindow
  var activeInfoWindow;

  // ------------------------------------------------------------------------------- //
  // initialize function      
  // ------------------------------------------------------------------------------- //
  function initialize() {

    // ------------------------------------------------------------------------------- //
    // LISTENER ON CLICK EVENT
    // ------------------------------------------------------------------------------- //
    $("a").on("click", function() {
      alert("got here!");
      // do something to change z-index of this marker
      //...
      // my_index = my_index-1; 
      //...
      return false;
    });

    // map options - lots of options available here 
    var mapOptions = {
      zoom: 5,
      draggable: true,
      center: new google.maps.LatLng(44.960, -93.100),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // create map in div called map-canvas using map options defined above
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    // define two Google Map LatLng objects representing geographic points
    var stPaul = new google.maps.LatLng(44.95283, -93.08925);
    var minneapolis = new google.maps.LatLng(44.97984, -93.26620);

    // place two markers
    fnPlaceMarkers(stPaul, "St Paul");
    fnPlaceMarkers(minneapolis, "Minneapolis");
  }


  // ------------------------------------------------------------------------------- //

  // create markers on the map
  // ------------------------------------------------------------------------------- //
  function fnPlaceMarkers(myLocation, myCityName) {

    var marker = new google.maps.Marker({
      position: myLocation,
      zIndex: Math.round(myLocation.lat() * -100000) << 5


    });

    // Renders the marker on the specified map
    marker.setMap(map);
    var i = markers.length;
    markers.push(marker);
    // create an InfoWindow
    var infoWnd = new google.maps.InfoWindow();

    // add content to your InfoWindow
    infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '<br/><a href="javascript:setMarkerBack(' + i + ');">Click</a> to move this marker to the back<br>zIndex=' + marker.get('zIndex') + '</div>');

    // add listener on InfoWindow - close last infoWindow  before opening new one 
    google.maps.event.addListener(marker, 'click', function() {

      //Close active window if exists - [one might expect this to be default behaviour no?]               
      if (activeInfoWindow != null) activeInfoWindow.close();

      // Open InfoWindow
      infoWnd.open(map, marker);

      // Store new open InfoWindow in global variable
      activeInfoWindow = infoWnd;
    });
  }


  // ------------------------------------------------------------------------------- //
  // initial load
  // ------------------------------------------------------------------------------- //       
  google.maps.event.addDomListener(window, 'load', initialize);

}); // end query
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)