初学 Google Maps JavaScript (三) 监听事件与创建多个标记
日期：2014-05-16 浏览次数：20346 次
初学 Google Maps JavaScript (3) 监听事件与创建多个标记
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no;" />
<meta charset="utf-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false&language=zh"></script><!--载入 Google Maps-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><!--载入 jQuery-->
<style>
#setType{-webkit-border-radius:10px;border:1px solid #CCC;padding:5px;background:#FFF;cursor:pointer;}
</style>
<script>
$(function(){
var marker=null;
$.latLng = function(lat,lng){
return new google.maps.LatLng(lat,lng);
}
$.createMarker = function(opts){
return new google.maps.Marker(opts);
}
$.createInfoWindow = function(opts){
return new google.maps.InfoWindow(opts);
}
$.size = function(w,h){
return new google.maps.Size(w,h);
}
$.moreMarker = function(latLng){
var marker = $.createMarker({position:latLng,map:map,draggable:true});//创建标志
//event.latLng.toString()
var infoWindow = $.createInfoWindow({content:'<b>Google Maps</b>',size:$.size(100,100)});
google.maps.event.addListener(marker,"mouseover",function(event){// 在标志上创建事件
infoWindow.open(map,marker);
});
google.maps.event.addListener(marker,"mouseout",function(event){// 在标志上创建事件
infoWindow.close(map,marker);
});
map.setCenter(latLng);//设置地图中心
}
var map = new google.maps.Map($("#map")[0],{
zoom:10,
center:$.latLng(34.28,117.11),
mapTypeId:google.maps.MapTypeId.ROADMAP
});
var num = 1;
var mapTypeArr = [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE
];
$("#setType").mousedown(function(){
$(this).css('background','#39F');
}).mouseup(function(){
$(this).css('background','#FFF');
num==mapTypeArr.length?num=0:num;
map.setMapTypeId(mapTypeArr[num]);
++num;
});
marker = $.createMarker({position:$.latLng(34.290708458919785,117.2353128051758),map:map,title:'煤机东村'});
google.maps.event.addListener(map,"click",function(event){
$.moreMarker(event.latLng);
});
});
</script>
</head>
<body>
<input type="button" id="setType" value="切换地图类型">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
