您的位置:首页 > Web前端 > JavaScript

google map js api 自个笔记

2011-12-16 12:34 381 查看
http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/basics.html
自己标记一下:

var GoogleMapConfig = {

scrollwheel:false,

adzoom:5,

showzoom:13,

center:[39.917,116.397]

};

/**

* google 地图展示类

* 可显示单个点或地址,也可通过addMarker方法显示多个点或地址

* 参数 container 必填:地图显示区域, String

* center: 显示的位置 默认[39.917,116.397]

* showzoom: 显示标记点时,地图的放大比例

* scrollwheel:是否能用鼠标滚轮放大缩小地图 默认false

* addMark:地图类新建的时候 是否添加标记显示,默认不显示, true or false

* title: 标记移上去显示的名字 addMark=true时前效

* adress:当center为空时,使用这个地址查询 并标记 addMark=true时前效, String

* callback:地址解析后的回调函数 function(id,marker){}, marker.getPosition().lat() 得到纬度值,

* marker.getPosition().lng() 得到经度值

*/

var GoogleMapShow=Class.create({

initialize:function(config){

this.config = {};

Object.extend(this.config,GoogleMapConfig);

Object.extend(this.config,config);

this.hasCenter=false;

this.container = $(this.config['container']);

this.center=this.config['center'];

this.callback=this.config['callback'];

if(config['center']==null||this.center[0]==0||this.center[1]==0){

this.center=GoogleMapConfig.center;

this.zoom=this.config['adzoom'];

}else{

this.zoom =this.config['showzoom'];

this.hasCenter=true;

}

if(this.container==null) {

alert("map_canvas is null");

return;

}

this.zIndex=1;

this.latlng = new google.maps.LatLng(this.center[0], this.center[1]);

var myOptions = {

scrollwheel:this.config['scrollwheel'],

zoom: this.zoom,

center: this.latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

this.map = new google.maps.Map(this.container, myOptions);

this.overlay = new google.maps.OverlayView;

this.overlay.draw = function(){

};

this.overlay.setMap(this.map)

if(this.config["addMark"]){

if(this.hasCenter){

this.addMarker(this.center[0], this.center[1],this.config["title"],this.config["address"]);

}else {//没有坐标点,按地址标记

this.addMarker(0, 0,this.config["title"],this.config["address"]);

}

}

},

addMarker:function(lat,lng,title,address,id){

if(lat==null||lat==0||lng==null||lng==0){

if(address!=null&&address!=""){//没有坐标点,按地址标记

this.codeAddress(title,address,id);

}

return null;

}

var latlng = new google.maps.LatLng(lat, lng);

var marker = new google.maps.Marker({

position: latlng,

map: this.map,

zIndex: this.zIndex

});

marker.name=title;

this.bindMarkerEvent(marker);

return marker;

},

bindMarkerEvent: function(a) {

var c = this;

if(a.name!=null&&a.name!=""){//如果没有标记名,不做展示

google.maps.event.addListener(a, "mouseover",

function() {

a.setZIndex(c.zIndex++);

c.showToolTip(a, a.name)

});

google.maps.event.addListener(a, "mouseout",

function() {

a.setZIndex(1);

c.hideToolTip();

});

}

google.maps.event.addListener(a, 'click', function() {

this.map.setZoom(this.zoom++);

}.bindAsEventListener(this));

},

codeAddress:function(title,address,id){

if(address=="") return;

if(!this.geocoder){

this.geocoder = new google.maps.Geocoder();

}

this.geocoder.geocode( { 'address': address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

var latlng =results[0].geometry.location;

if(this.center==GoogleMapConfig.center){//如果是默认的

this.map.setCenter(latlng);

this.map.setZoom(8);

}

var marker = new google.maps.Marker({

map: this.map,

position: latlng

});

marker.name=title;

this.bindMarkerEvent(marker);

if(this.callback){

this.callback.call(this,id,marker);

}

} else {

//alert("google api was not successful for the following reason: " + status);

}

}.bind(this));

},

setCenter:function(lat,lng){

if(lat==null||lat==0||lng==null||lng==0){

return;

}

this.latlng = new google.maps.LatLng(lat, lng);

this.map.panTo(this.latlng);

},

showToolTip: function(marker, text) {

// if (!this._toolTip) {

// this._toolTip= new Element("div",{"class":"tooltip"});

// this._toolTip.update('<div class="tt-bd"><span></span></div>\t<span class="arrow"></span>');

// this.container.appendChild(this._toolTip);

// }

// this._toolTip.select(".tt-bd>span")[0].update(text);

// this._toolTip.setStyle({"width":"auto"});

// var c = this._toolTip.getWidth();

// var b = this._toolTip.getHeight();

//

// var point = this.overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition());

// this._toolTip.setStyle({

// top: (point.y - b - 14 - 10)+"px",

// left: (point.x - c / 2 + 12)+"px"

// });

// this._toolTip.show();

if (!this._toolTip) {

this._toolTip =new google.maps.InfoWindow({

content:"<br />"+text,

maxWidth:150

});

}

this._toolTip.setContent("<br />"+text);

this._toolTip.open(this.map,marker);

},

hideToolTip:function(){

if (this._toolTip) {

//this._toolTip.hide();

this._toolTip.close();

}

}

});



调用:

new GoogleMapShow({

container:"agency_map",

center:[<ww:property value="agencyContact.lat"/>,<ww:property value="agencyContact.lng"/>],

addMark:true,

showzoom:8,

address:"<ww:property value="agencyContact.addressStr"/>",

callback:function(id,marker){

if(marker!=null&&marker!="undefined"){

DwrAgency.initAdressLatlng(<ww:property value="agencyContact.id"/>,marker.getPosition().lat(),marker.getPosition().lng(),function(){});

}

}

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: