首页 > 编程语言> > javascript – 允许用户在谷歌地图自定义地图中移回标记位置(z-index？)

javascript – 允许用户在谷歌地图自定义地图中移回标记位置(z-index？)

2019-09-29 19:36:48 作者：互联网

我想允许用户能够在InfoWindow内的点击上移动自定义谷歌地图标记的顺序.这是为了克服重叠标记的问题.我考虑过其他解决方案(移动lat / lon,标记簇,“蜘蛛标记”).

我的代码有两个问题：1)jquery监听器不工作2)但更重要的是如何实现z-index(或其他技术？)的更改和重新显示.

<!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>

解决方法:

>为所有标记设置zIndex(否则未定义),好的值是(纬度* -100000)<< 5(来自古代史上的迈克威廉姆斯)

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

>保持对所有标记的引用(数组标记)

markers.push(marker);

>单击链接时,将zIndex减去-100000.

working fiddle

代码段：

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>

标签：javascript,jquery,google-maps-api-3,z-index
来源： https://codeday.me/bug/20190929/1832898.html