以下經測試通過：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.8&sensor=false&language=zh-CN"></script>
<script type="text/javascript">
var apply = function(base,expand){//用於copy屬性
for(var key in expand){
base[key] = expand[key];
}
};
var MyMap = function(id,mapOptions){
//用於得到類型
var _getMapTypeId = function(type){
var mapTypeMap = {
"NORMAL":google.maps.MapTypeId.ROADMAP,//地圖
"HYBRID":google.maps.MapTypeId.HYBRID,//衛星混合圖
"TERRAIN":google.maps.MapTypeId.TERRAIN//地形圖
};
return mapTypeMap[type]||google.maps.MapTypeId.ROADMAP;
},ggListenersMap = {zoom_changed:"zoom_changed",click : "click",mousemove:"mousemove"};//控制監聽事件範圍,方便兼容控制
var baseOption = {//內置初始數據
center: new google.maps.LatLng(32.397, 120.144),//維度 Latitude 經度Longitude
zoom: 7,
mapTypeId: _getMapTypeId("NORMAL")
};
apply(baseOption,mapOptions||{});
var mapCanvas = document.getElementById(id);
var map = new google.maps.Map(mapCanvas,baseOption);
/*this.setOptions = function(mapOptions){
map.setOptions(mapOptions);//因想與百度兼容,暫不瞭解百度Map,不開放
}*/
//設置zoom大小,因對百度Map不瞭解,範圍暫不控制
this.setZoom = function(zoom){
map.setZoom(zoom);
};
this.getZoom = function(){
return map.getZoom();
};
/**
* 設置中心點
* 經緯度
*/
this.setCenter = function(latitude,longitude){
map.setCenter(new google.maps.LatLng(latitude,longitude));
}
//添加監聽 內部會擴展
this.addListeners = function(listenersMap){
var scope = listenersMap['scope']||this;
for(var key in listenersMap){
if(!ggListenersMap[key]){continue;}
//var arr = [this];
google.maps.event.addListener(map,ggListenersMap[key],function(){
/*for(var i=0,len = arguments.length;i<len;i++){
arr = arr.concat(arguments[i]);
}
listenersMap[key].apply(scope||this,arr);這裏註釋待研究下百度Map確定*/
listenersMap[key].call(scope);
});
}
}
//...etc 擴展
};
</script>
<script type="text/javascript">
window.onload = function(){
var myMap = new MyMap('myMapCanvas');
myMap.addListeners({
click:function(){
alert(myMap.getZoom());
}
});
}
</script>
</head>
<body>
<div id="myMapCanvas" style="width: 100%; height: 400px"></div>
</body>
</html>
