允许用户在谷歌地图自定义地图中移回标记位置（z-index？）
我想允许用户能够在InfoWindow内的点击上移动自定义谷歌地图标记的顺序。 这是为了克服重叠标记的问题。 我考虑过其他解决方案（移动lat / lon，标记簇，“蜘蛛标记”）。
我的代码有两个问题：1）jquery监听器不工作2）但更重要的是如何实现z-index（或其他技术？）的更改和重新显示。
#map-canvas, #side-bar { height: 500px; width: 600px; } // 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('' + 'Welcome to ' + myCityName + '
Click to move this marker to the back'); // 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 -
设置所有标记的zIndex（否则没有定义），好的值是
(latitude * -100000) << 5（来自古代史上的(latitude * -100000) << 5姆斯）var marker = new google.maps.Marker({ position: myLocation, zIndex: Math.round(myLocation.lat()*-100000)<<5 }); -
保持对所有标记的引用（数组
markers）markers.push(marker); -
单击链接时，减去zIndex -100000。
工作小提琴
代码段：
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('' + 'Welcome to ' + myCityName + '
Click to move this marker to the back
zIndex=' + marker.get('zIndex') + ''); // 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 }