允许用户在谷歌地图中向后移动标记位置并关闭窗口
Posted
技术标签:
【中文标题】允许用户在谷歌地图中向后移动标记位置并关闭窗口【英文标题】：allow user to move marker position back & close window in google maps 【发布时间】：2015-05-31 07:15:25 【问题描述】：跟进最后一个问题... allow user to move marker position back (z-index?) in google maps custom map
我想允许用户使用 zIndex 属性将谷歌地图标记移回，同时在移回后关闭 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>
【问题讨论】：
【参考方案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
代码sn-p：
"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 jqueryhtml,
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>【讨论】：
抱歉，有时候最明显的东西我都忽略了！以上是关于允许用户在谷歌地图中向后移动标记位置并关闭窗口的主要内容，如果未能解决你的问题，请参考以下文章