预览文章: 初学 Google Maps JavaScript (4) 反向地址解析

最新推荐文章于 2025-08-22 11:32:18 发布

iteye_20503

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

分类专栏： Google Map 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_20503/article/details/82200998

Google Map 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Google Maps API实现一个简易的地图功能，包括加载地图、创建标记、显示地址信息及切换地图类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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;}
body{font-size:12px;}
</style>
<script>
var marker=null;
var geocoder;
$(function(){
	$.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);
	}
	$.geocoder = function(){
		return new google.maps.Geocoder();
	}
	$.size = function(w,h){
		return new google.maps.Size(w,h);
	}
	$.moreMarker = function(latLng){
		addRess = "";
		var marker = $.createMarker({position:latLng,map:map,draggable:false});//创建标志
		//event.latLng.toString()
		var infoWindow = $.createInfoWindow({content:'<b>Google Maps</b>',size:$.size(50,50)});
		if (geocoder) {
    	  geocoder.geocode({'latLng': latLng}, function(results, status) {
     	   if (status == google.maps.GeocoderStatus.OK) {
			infoWindow.setContent( results[0].formatted_address );
        } else {
          	alert(status);
        }
      });
    }
		google.maps.event.addListener(marker,"mouseover",function(){// 在标志上创建事件
			infoWindow.open(map,marker);
		});
		google.maps.event.addListener(marker,"mouseout",function(){// 在标志上创建事件
			infoWindow.close(map,marker);
		});
		map.setCenter(latLng);//设置地图中心
	}
	geocoder = $.geocoder();
	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>