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

2019-09-29 19:36:48 阅读：169 来源： 互联网

标签：javascript jquery google-maps-api-3 z-index

我想允许用户能够在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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