允许用户在Google地图自定义地图中移回标记位置（z-index？） [英] allow user to move marker position back (z-index?) in google maps custom map

查看：169
本文介绍了允许用户在Google地图自定义地图中移回标记位置（z-index？）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望允许用户在InfoWindow内的点击上移动自定义Google地图标记的顺序。这是为了克服重叠标记的问题。我考虑过其他解决方案（移动纬度/经度，标记簇，蜘蛛标记）。





我的代码有两个问题：1）jquery listener不工作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/jstype =text / javascript>< / script> 
< script src =../ jquery / jquery.jstype =text / javascript>< / script> 
< script type =text / javascript> 
 
 
 // jQuery的范围
 $（document）.ready（function（）{
 
use strict; 
 
 //变量保存地图
 var map; 
 
 //变量保存当前活动InfoWindow 
 var activeInfoWindow; 
 
 // b -------------------------------------------------- ----------------------------- // 
 //初始化函数
 // ----- -------------------------------------------------- ------------------------ // 
函数initialize（）{
 
 // ----- -------------------------------------------------- ------------------------ // 
 // LISTENER点击事件
 // -------- -------------------------------------------------- --------------------- // 
 $（a）.on（click，function（）{
 alert（ 到了这里！）; 
 //做一些事情来改变这个市场的z-index r 
 // ... 
 // my_index = my_index-1; 
 // ... 
返回false; 
}）; 
 
地图选项 - 这里提供了很多选项
 var mapOptions = {
 zoom：5，
 draggable：true，
 center：new google .maps.LatLng（44.960，-93.100），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 
 //使用上面定义的地图选项调用map-canvas在div中创建地图
 map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; 
 
 //定义两个表示地理点的Google Map LatLng对象
 var stPaul = new google.maps.LatLng（44.95283，-93.08925）; 
 var minneapolis = new google.maps.LatLng（44.97984，-93.26620）; 
 
 //放置两个标记
 fnPlaceMarkers（stPaul，St Paul）; 
 fnPlaceMarkers（明尼阿波利斯，明尼阿波利斯）; 
} 
 
 
 // ------------------------------- ------------------------------------------------ // 
 //在地图上创建标记
 // --------------------------------- ---------------------------------------------- // 
函数fnPlaceMarkers（myLocation，myCityName）{
 
 var marker = new google.maps.Marker（{
 position：myLocation 
}）; 
 
 //渲染指定地图上的标记
 marker.setMap（map）; 
 
 //创建一个InfoWindow 
 var infoWnd = new google.maps.InfoWindow（）; 
 
 //将内容添加到InfoWindow 
 infoWnd.setContent（'< div class =scrollFix>'+'欢迎使用'+ myCityName +'< br /> < a href =＃>点击< / a>将此标记移动到后面< / div>）; 
 
 //在InfoWindow上添加监听器 - 在打开新监视器之前关闭最后一个infoWindow 
 google.maps.event.addListener（marker，'click'，function（）{
 
 //关闭活动窗口如果存在 -  [可能预期这是默认行为no] 
 if（activeInfoWindow！= null）activeInfoWindow.close（）; 
 
 // Open InfoWindow 
 infoWnd.open（map，marker）; 
 
 //将新的InfoWindow存储到全局变量
 activeInfoWindow = infoWnd; 
}）; 
} 
 
 
 // ------------------------------- ------------------------------------------------ // 
 //初始加载
 // ------------------------------------ ------------------------------------------- // 
 google .maps.event.addDomListener（window，'load'，initialize）; 
 
}）; //结束查询
 
 
< / script> 
< div id =map-canvas>< / div> 
< / body> 
< / html>


解决方案


  1. set所有标记的zIndex（否则它没有定义），好值是（latitude * -100000）<<< 5 （来自迈克尔威廉姆斯的古代历史）

      var marker = new google.maps.Marker {
     position：myLocation，
     zIndex：Math.round（myLocation.lat（）*  -  100000）<5 
    }）;


  2. 保留所有标记的引用（array markers
    pre $ markers.push（marker）;

    3. 当点击链接时，

  3. 将zIndex减少-100000。




代码段：



function setMarkerBack（i）{var currentZ = markers [ I]获得（ 'zIndex的'）;标记[i] .set（'zIndex'，currentZ - 100000）;} var markers = []; //为jquery确定$（document）.ready（function（）{use strict; // variable to hold a map var map; //保存当前活动的变量InfoWindow var activeInfoWindow; // --------------------------------- ---------------------------------------------- // //初始化函数// ---------------------------------------------- --------------------------------- // function initialize（）{// -------- -------------------------------------------------- --------------------- // // CLICK EVENT上的LISTENER // ------------------- -------------------------------------------------- //（a）。on（click，function（）{alert（got here！）; //做一些事情来改变这个标记的z-index // ... // my_index = my_index-1; // ... return false;}）; // map选项 - 这里提供了很多选项var mapOptions = {zoom：5，draggable：true，center：new go ogle.maps.LatLng（44.960，-93.100），mapTypeId：google.maps.MapTypeId.ROADMAP}; //使用上面定义的map选项在div中创建名为map-canvas的地图map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; //定义两个代表地理点的Google Map LatLng对象var stPaul = new google.maps.LatLng（44.95283，-93.08925）; var minneapolis = new google.maps.LatLng（44.97984，-93.26620）; //放置两个标记fnPlaceMarkers（stPaul，St Paul）; fnPlaceMarkers（明尼阿波利斯，明尼阿波利斯）; } // ----------------------------------------------- -------------------------------- // //在地图上创建标记// ------- -------------------------------------------------- ---------------------- // function fnPlaceMarkers（myLocation，myCityName）{var marker = new google.maps.Marker（{position：myLocation，zIndex：Math .round（myLocation.lat（）* -100000）<< 5}）; //在指定的地图上渲染标记marker.setMap（map）; var i = markers.length; markers.push（标记）; //创建一个InfoWindow var infoWnd = new google.maps.InfoWindow（）; //将内容添加到InfoWindow infoWnd.setContent（'< div class =scrollFix>'+'欢迎使用'+ myCityName +'< br />< a href =javascript：setMarkerBack（' （< / div>'）;< / + //在InfoWindow上添加监听器 - 在打开新监听器之前关闭最后一个infoWindow google.maps.event.addListener（marker，'click'，function（）{//关闭活动窗口（如果存在） - [可能会认为这是默认行为no ？] if（activeInfoWindow！= null）activeInfoWindow.close（）; //打开InfoWindow infoWnd.open（map，marker）; //将新的InfoWindow存储在全局变量activeInfoWindow = infoWnd;}）; } // ----------------------------------------------- -------------------------------- // //初始加载// ---------- -------------------------------------------------- ------------------- // google.maps.event.addDomListener（window，'load'，initialize）;}）; //结束查询 

  html，body，＃map-canvas {身高：100％;宽度：100％; margin：0px; < script src =https：//


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").

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

这篇关于允许用户在Google地图自定义地图中移回标记位置（z-index？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆