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

问题描述

我希望用户能够在 InfoWindow 内单击时移动自定义谷歌地图标记的顺序.这是为了克服重叠标记的问题.我考虑过其他解决方案(移动纬度/经度、标记簇、蜘蛛标记").

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

<头><风格>#map-canvas, #side-bar {高度:500px；宽度:600px；}</风格><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">//jquery 的作用域$( 文档 ).ready(function() {严格使用"；//保存地图的变量无功地图；//保存当前活动信息窗口的变量var activeInfoWindow ;//-------------------------------------------------------------------------------////初始化函数//-------------------------------------------------------------------------------//函数初始化(){//-------------------------------------------------------------------------------////监听器点击事件//-------------------------------------------------------------------------------//$( "a" ).on( "点击", function() {alert("到了！");//做一些事情来改变这个标记的 z-index//...//my_index = my_index-1;//...返回假；});//地图选项 - 这里有很多可用的选项var mapOptions = {缩放:5，可拖动:真实，中心:新的 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 = 新的 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 标记 = 新的 google.maps.Marker({位置:我的位置});//在指定地图上渲染标记标记.setMap(地图);//创建一个信息窗口var infoWnd = new google.maps.InfoWindow();//将内容添加到您的信息窗口infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '<br/><a href="#">点击</a>移动这个标记到后面

');//在 InfoWindow 上添加监听器 - 在打开新的之前关闭最后一个 infoWindowgoogle.maps.event.addListener(marker, 'click', function() {//如果存在则关闭活动窗口 - [有人可能认为这是默认行为不是吗?]if(activeInfoWindow != null) activeInfoWindow.close();//打开信息窗口infoWnd.open(地图，标记)；//将新打开的 InfoWindow 存储在全局变量中activeInfoWindow = infoWnd;});}//-------------------------------------------------------------------------------////初始加载//-------------------------------------------------------------------------------//google.maps.event.addDomListener(window, 'load', initialize);});//结束查询<div id="map-canvas"></div>

解决方案

1. 为所有标记设置zIndex(否则不定义)，好的值是(latitude * -100000) <<5(来自古代历史上的Mike Williams)

   var 标记 = new google.maps.Marker({位置:我的位置，zIndex:Math.round(myLocation.lat()*-100000)<<5});

2. 保留对所有标记的引用(数组markers)

   markers.push(marker);

3. 点击链接时将 zIndex 减少 -100000.

工作小提琴

代码片段:

function setMarkerBack(i) {var currentZ = 标记[i].get('zIndex');标记[i].set('zIndex', currentZ - 100000);}var 标记 = [];//jquery 的作用域$(document).ready(function() {严格使用"；//保存地图的变量无功地图；//保存当前活动信息窗口的变量var activeInfoWindow;//-------------------------------------------------------------------------------////初始化函数//-------------------------------------------------------------------------------//函数初始化(){//-------------------------------------------------------------------------------////监听器点击事件//-------------------------------------------------------------------------------//$("a").on("click", function() {alert("到了！");//做一些事情来改变这个标记的 z-index//...//my_index = my_index-1;//...返回假；});//地图选项 - 这里有很多可用的选项var mapOptions = {变焦:5，可拖动:真实，中心:新的 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 = 新的 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 标记 = 新的 google.maps.Marker({位置:我的位置，zIndex: Math.round(myLocation.lat() * -100000) <<5});//在指定地图上渲染标记标记.setMap(地图);var i = 标记长度；标记.推(标记)；//创建一个信息窗口var infoWnd = new google.maps.InfoWindow();//将内容添加到您的信息窗口infoWnd.setContent('<div class="scrollFix">' + '欢迎来到 ' + myCityName + '<br/><a href="javascript:setMarkerBack(' + i + ');">点击</a>将此标记移到后面<br>zIndex=' + marker.get('zIndex') + '</div>');//在 InfoWindow 上添加监听器 - 在打开新的之前关闭最后一个 infoWindowgoogle.maps.event.addListener(marker, 'click', function() {//如果存在则关闭活动窗口 - [有人可能认为这是默认行为不是吗?]if (activeInfoWindow != null) activeInfoWindow.close();//打开信息窗口infoWnd.open(地图，标记)；//将新打开的 InfoWindow 存储在全局变量中activeInfoWindow = infoWnd;});}//-------------------------------------------------------------------------------////初始加载//-------------------------------------------------------------------------------//google.maps.event.addDomListener(window, 'load', initialize);});//结束查询

html,身体，#地图画布{高度:100%；宽度:100%；边距:0px；填充: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>

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>

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