Google地图API方式查看卫星地图

最新推荐文章于 2022-12-28 22:53:27 发布

鹤立鸭群

最新推荐文章于 2022-12-28 22:53:27 发布

阅读量4.5k

点赞数 2

分类专栏： JavaScript 文章标签：谷歌 Google 地图 API

本文链接：https://blog.csdn.net/csndmi/article/details/49306857

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

最近发现谷歌地图http://www.google.cn/maps 左下角点击卫星图像的时候，不能切换到卫星地图模式，于是借助Google地图API方式写了个DEMO，算是学习了下Google地图，代码如下：

<!DOCTYPE html>
<html>
<head>
<title>Google Map</title>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?v=3&sensor=false&language=zh-cn"></script>
<script type="text/javascript">
	window.onload = function() {
	var geo = new geoEach();
	// 解析地名到经纬度
	var area = '中国\n南京';
	area = area.split('\n');
	var sh;
	var i = 0;
	//
	sh = window.setInterval(function() {
		if (i < area.length) {
			geo.toLatLng(area[i]);
		} else {
			window.clearInterval(sh);
		}
		i++;
	}, 500);//每隔500毫秒解析地名直至到最小地名后关闭定时器
}
function geoEach() {
	// 初始化地图
	geoEach.map = new google.maps.Map(document.getElementById("map_canvas"), {
		center : new google.maps.LatLng(35.86166, 104.19539699999996),
		zoom : 4,
		mapTypeId : google.maps.MapTypeId.HYBRID
	});
	// 添加一个marker
	geoEach.marker = new google.maps.Marker({
		map : geoEach.map,
		position : new google.maps.LatLng(35.86166, 104.19539699999996)
	});
	// 实例化geocoder服务
	geoEach.geocoder = new google.maps.Geocoder();
}
geoEach.address = null;// 需要解析的地名
geoEach.prototype = {
	// 解析地名
	toLatLng : function(address) {
		// 接收
		geoEach.address = address;
		// 执行geocoder解析地名
		geoEach.geocoder.geocode({
			// 传入地名
			'address' : geoEach.address
		}, function(results, status) {
			// create div
			var newElement = window.document.createElement('p');
			if (status == google.maps.GeocoderStatus.OK) {
				// 获取解析后的经纬度
				var location = results[0].geometry.location;
				// 切换地图位置
				geoEach.map.setCenter(location);
				geoEach.marker.setPosition(location);

				var latLng = location.toString().substr(1,location.toString().indexOf(')') - 1);
				// insert innerHTML
				newElement.innerHTML = geoEach.address + ":" + latLng;
			} else {
				// insert error innerHTML
				newElement.innerHTML = geoEach.address + ":error" + status;
			}
		});
	}
}
</script>
</head>
<body>   
<div id="map_canvas" style="width: 100%; height: 580px"></div>
</body>
</html>

效果图如下：

鹤立鸭群

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
Google地图API方式查看卫星地图

最近发现谷歌地图http://www.google.cn/maps 左下角点击卫星图像的时候，不能切换到卫星地图模式，于是借助Google地图API方式写了个DEMO，算是学习了下Google地图，代码如下：Google Map window.onload = function() { var geo = new geoEach(); // 解析地名到经纬度 var are
复制链接

扫一扫