允许用户在 google 地图中向后移动标记位置并关闭 window

Question

跟进上一个问题...

我想允许用户使用 zIndex 属性将 google 地图标记移回，同时在移回后关闭 infoWindow。问题：关闭信息窗口存在范围问题。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title></title>    

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

<style>

    #map-canvas{        
        height: 500px;
        width: 600px;        
    }

</style>

<script type="text/javascript">

        "use strict";

        var markers = [];

        $( document ).ready(function() {

            // variable to hold a map
            var map;

            // variable to hold current active InfoWindow
            var activeInfoWindow;

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

                // map options - lots of options available here 
                var mapOptions = {
                    zoom: 5,
                    draggable: true,
                    center: new google.maps.LatLng(44.9610, -93.1002),
                    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 three Google Map LatLng objects representing geographic points
                var stPaul          = new google.maps.LatLng(44.95274,-93.08915);
                var minneapolis     = new google.maps.LatLng(44.97999,-93.26630);
                var falconHeights   = new google.maps.LatLng(44.99161,-93.1664);

                // place markers
                fnPlaceMarkers(stPaul,"St Paul");
                fnPlaceMarkers(minneapolis,"Minneapolis");          
                fnPlaceMarkers(falconHeights,"Falcon Heights");                     

                // ------------------------------------------------------------------------------- //
                // LISTENERS
                // ------------------------------------------------------------------------------- //

                // on click of a href in infoWindow
                $( "#map-canvas" ).on( "click", "a", function( event ) {
                    var seq = $(this).attr("data-seq");
                    setMarkerBack(seq)
                    return false;
                });

            }

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

                // save marker
                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="#" data-seq='+i+'>Click</a>' + ' to move back marker\'s zIndex value which will move marker back' + "<br/>" +
                'zIndex is ' +marker.get('zIndex') + "<br/>" +
                '</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;
                });
            }

            // ------------------------------------------------------------------------------- //
            // set marker z-index back
            // ------------------------------------------------------------------------------- //       
            function setMarkerBack(i){
                    var currentZ = markers[i].get('zIndex');
                    markers[i].set('zIndex', currentZ-100000);                              
                    // infoWnd.close();
            }

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

    }); // end jquery

</script>

<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

Answer 1

改变这个：

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

收件人：

function setMarkerBack(i) {
  var currentZ = markers[i].get('zIndex');
  markers[i].set('zIndex', currentZ - 100000);
  // activeInfoWindow is a reference to the currently open infowindow
  activeInfoWindow.close();
}

working fiddle

代码片段：

"use strict";

var markers = [];

$(document).ready(function() {

  // variable to hold a map
  var map;

  // variable to hold current active InfoWindow
  var activeInfoWindow;

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

    // map options - lots of options available here 
    var mapOptions = {
      zoom: 5,
      draggable: true,
      center: new google.maps.LatLng(44.9610, -93.1002),
      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 three Google Map LatLng objects representing geographic points
    var stPaul = new google.maps.LatLng(44.95274, -93.08915);
    var minneapolis = new google.maps.LatLng(44.97999, -93.26630);
    var falconHeights = new google.maps.LatLng(44.99161, -93.1664);

    // place markers
    fnPlaceMarkers(stPaul, "St Paul");
    fnPlaceMarkers(minneapolis, "Minneapolis");
    fnPlaceMarkers(falconHeights, "Falcon Heights");

    // ------------------------------------------------------------------------------- //
    // LISTENERS
    // ------------------------------------------------------------------------------- //

    // on click of a href in infoWindow
    $("#map-canvas").on("click", "a", function(event) {
      var seq = $(this).attr("data-seq");
      setMarkerBack(seq)
      return false;
    });

  }

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

    // save marker
    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="#" data-seq=' + i + '>Click</a>' + ' to move back marker\'s zIndex value which will move marker back' + "<br/>" +
      'zIndex is ' + marker.get('zIndex') + "<br/>" +
      '</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;
    });
  }

  // ------------------------------------------------------------------------------- //
  // set marker z-index back
  // ------------------------------------------------------------------------------- //       
  function setMarkerBack(i) {
    var currentZ = markers[i].get('zIndex');
    markers[i].set('zIndex', currentZ - 100000);
    activeInfoWindow.close();
  }

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

}); // end jquery

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>

允许用户在 google 地图中向后移动标记位置并关闭 window

allow user to move marker position back & close window in google maps

google-maps

scope

z-index

google-maps-api-3