学习Google Map 第三版

工作中要用到,所以看了下,第三版无需key,这点很爽...

 

与第二版 很多API均做了改写... 很多方法被移除,边看便用,现在终于改完了... 日

 

// <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
var PhotoMap = function(){
	
	this.map = null ;
	this.geocoder = null ;
	this.initMaker = null ;
	
	this.initialize = function(){
		  
		var latLng = new google.maps.LatLng(39.92, 116.46);
		
		var mapOptions = {
			zoom: 4 ,
			center: latLng ,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		} ;
		
		// 初始化地图对象
		this.map = new google.maps.Map(document.getElementById('map'),mapOptions);
		
		// 初始化标志对象并加到地图上
		this.initMaker = this.createMaker(latLng,this.map,"Here") ;
		
		// 初始化地址查询对象
		this.geocoder = new google.maps.Geocoder();		
		
		// 绑定地图点击事件
		var _this = this ;
		google.maps.event.addListener(this.map, 'click', function(event){
			
			if(event.latLng){
				_this.initMaker.setPosition(event.latLng) ;
				$("#mapx").val(event.latLng.lat());
				$("#mapy").val(event.latLng.lng());
				$("#mapzoom").val(_this.map.getZoom());
				
				console.log("点击位置 [经度: %s ;纬度: %s ;缩放级别: %d]",event.latLng.lat(),event.latLng.lng(),_this.map.getZoom());
			}
		});
		
	} ;
		
	this.createMaker = function(latLng,map,title){
		return new google.maps.Marker({position:latLng,map:map,title:title});
	} ;
	
	var adderssMakers = [] ;
	
	this.createAdderssMakers = function(address){
		this.initMaker.setVisible(false) ;
		this.clearAdderssMakers() ;
		
		var _this = this ;
		this.geocoder.geocode({address: address}, function(results,status){
			console.log(results,status);
			if (status == google.maps.GeocoderStatus.OK)  {
			
				document.getElementById("divOutput").innerHTML = "成功("+results.length+")<br />";
				
				for (var i=0; i<results.length; i++) {
					var latlng = results[i].geometry.location ;
					
					var maker = _this.createMaker(latlng,_this.map,i+1 + '') ;
					
					adderssMakers.push(maker) ;
					
					var address = results[i].formatted_address; // 地址
					if( i == 0 )
					{
						_this.locate(latlng);
					}
					document.getElementById("divOutput").innerHTML += ( (i+1) + " " + address + " <small>"+latlng.toString()+"</small> <a href=javascript:go("+latlng.lat()+","+latlng.lng()+")>go</a><br />" );
				}
			}
		});
		
	};
	
	this.clearAdderssMakers = function(){
		for (i in adderssMakers)
			adderssMakers[i].setMap(null);
		adderssMakers = [] ;
	} ;
	
	this.go = function(lat,lng){
		return this.locate(new google.maps.LatLng(lat,lng)) ;
	} ;
	
	this.locate = function(latlng){
		
		var _this = this ;
		this.geocoder.geocode({latLng: latlng}, function(results,status){
			
			console.log(results,status);
			
			if (status == google.maps.GeocoderStatus.OK)  {
				_this.map.panTo(latlng) ;
				_this.map.setCenter(latlng);
				_this.map.setZoom(14) ;
				
				_this.clearAdderssMakers() ;
				_this.initMaker.setPosition(latlng) ;
				_this.initMaker.setVisible(true) ;
				
				$("#mapx").val(latlng.lat());
				$("#mapy").val(latlng.lng());
				$("#mapzoom").val(_this.map.getZoom());
				
				console.log("点击位置 [经度: %s ;纬度: %s ;缩放级别: %d]",latlng.lat(),latlng.lng(),_this.map.getZoom());
			}
		});
		
	} ;
	
	this.initialize() ;
} ;


var pMap = null ;
$(document).ready(function(){
	pMap = new PhotoMap();
});

function showLocation() {
	document.getElementById("divOutput").innerHTML = "搜索中...";
	var address = document.getElementById('address').value;
	return pMap.createAdderssMakers(address);
}

function go(lat,lng)
{
	return pMap.go(lat,lng);
}

 

FireFox上测试通过

评论

4 楼 vb2005xu 2010-12-13  

你看下API帮助,肯定是传人的参数有问题

3 楼 晒屁屁 2010-12-12  

请问一下,为什么我用GOOGLE MAP API上的例子,出来的地图没有GOOGLE主页上的地图详细,像店铺信息什么的都没有,卫星图也不能正常加载,是不是因为我参数配置有问题?

2 楼 vb2005xu 2010-11-17  

修正一个方法

function clearMapOverlays(){
	for (i in markers) {
		markers[i].setMap(null);
		markers[i] = null ;
	}
	markers.length = 0 ;
}

1 楼 vb2005xu 2010-11-17  

对象虽好,但是仔细看了下,要改的东西竟然还夹杂着iframe里面的内容,日,还是单开写好把

var map = null;
var geocoder = null;
var markers = [] ;

function clearMapOverlays(){
	for (i in markers) markers[i].setMap(null);
	markers = [] ;
}
function createMapMarker(obj){
	var marker = new google.maps.Marker(obj);
	if (marker)
		markers.push(marker);
	return marker ;
}

function initialize() {
	var latLng = new google.maps.LatLng(39.92, 116.46);	
	var mapOptions = {zoom: 4 ,center: latLng ,mapTypeId: google.maps.MapTypeId.ROADMAP} ;		
    map = new google.maps.Map(document.getElementById('map'),mapOptions);    
	geocoder = new google.maps.Geocoder();	
	
	createMapMarker({position:latLng,map:map});
	
	google.maps.event.addListener(map, 'click', function(event){			
		if(event.latLng){
			clearMapOverlays();
			createMapMarker({position:event.latLng,map:map});			
			$("#mapx").val(event.latLng.lat());
			$("#mapy").val(event.latLng.lng());
			$("#mapzoom").val(map.getZoom());
		}
	});
}

function showLocation() {
	clearMapOverlays();
	document.getElementById("divOutput").innerHTML = "搜索中...";
	var address = document.getElementById('address').value;
	geocoder.geocode({address: address}, cb_showLocation);
}

function cb_showLocation(results,status) {
	if (status == google.maps.GeocoderStatus.OK)  {
		document.getElementById("divOutput").innerHTML = "成功("+results.length+")<br />";				
		for (var i=0 ;i<results.length ;i++) {
			var latlng = results[i].geometry.location;					
			createMapMarker({position:latlng,map:map,title:i+1+''});//must string
			var address = results[i].formatted_address; 
			if(i==0){locate(latlng);}
			document.getElementById("divOutput").innerHTML += ( (i+1) + " " + address + " <small>"+latlng.toString()+"</small> <a href=javascript:go("+latlng.lat()+","+latlng.lng()+")>go</a><br />" );
		}
	}
}

function locate(latlng)
{
	geocoder.geocode({latLng: latlng}, function(results,status){
	
		if (status == google.maps.GeocoderStatus.OK)  {
			map.panTo(latlng) ;
			map.setCenter(latlng);
			map.setZoom(14) ;
			
			clearMapOverlays() ;
			createMapMarker({position:latlng,map:map});
			
			$("#mapx").val(latlng.lat());
			$("#mapy").val(latlng.lng());
			$("#mapzoom").val(map.getZoom());		
		}
	});
}
function go(lat,lng)
{
	var latlng = new google.maps.LatLng(lat,lng);
	locate(latlng);
}

$(document).ready(function(){ initialize() ;});