[置顶] 学习Google Map 第三版

最新推荐文章于 2024-08-28 10:09:52 发布

原创最新推荐文章于 2024-08-28 10:09:52 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 3 个专栏收录

26 篇文章

订阅专栏

Google

16 篇文章

订阅专栏

Firefox

14 篇文章

订阅专栏

本文介绍使用 Google Maps API 第三版实现地图功能的方法，包括无需密钥、API 更新内容及具体应用实例，如创建标记、地址解析及地图交互等。

工作中要用到,所以看了下,第三版无需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上测试通过