基于Google Map整合GIS地图

最新推荐文章于 2024-06-22 15:10:31 发布
最新推荐文章于 2024-06-22 15:10:31 发布
阅读量2.9k 收藏 3
点赞数 1
分类专栏： 【Web开发】 【Javascript】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenghui0317/article/details/8489172
版权
原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本人声明。否则将追究法律责任。
作者： 永恒の_☆ 地址： http://blog.csdn.net/chenghui0317/article/details/8489172

介绍和实现

一、       介绍

1、  Google Map 是实现 WebGIS 的新技术模式，GoogleMap 的出现降低了 web 地图服务的技术门槛，网络上嵌入 GoogleMap 各种应用随处可见。Google map api 已经给出了大量使用的接口方便调用，接下来一一介绍如何使用。

二、   实现

1、  创建地图

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#map_canvas{height: 100%;}
</style>
<script type="text/javascript">  
	var map;
	window.onload =  function(){
		loadScript();
		initialize();
	}
		
	function loadScript() {
	  var script = document.createElement("script");
	  script.type = "text/javascript";
	  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
	  document.body.appendChild(script);
	}

	function initialize() {
		//声明坐标对象，默认以它为地图中心点
		var myLatlng = new google.maps.LatLng(39.7, 117.1);
		var myOptions = {
			zoom: 5,  //地图的缩放级别，数字越大，地图越详细
			center: myLatlng,  //指定显示地图的中心对象
			mapTypeId: google.maps.MapTypeId.ROADMAP  //地图类型指定为 路标
		}
		//创建一个新的map相当于 显示地图图层
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	}
</script>

</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>

2、  添加层点

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#map_canvas{height: 100%;}
</style>
<script type="text/javascript">  
	//显示的地图对象
	var map;
	//声明坐标对象，默认以它为地图中心点
	var myLatlng = null;
	window.onload =  function(){
		loadScript();
		initialize();
	}
	
	//加载脚本
	function loadScript() {
	  var script = document.createElement("script");
	  script.type = "text/javascript";
	  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
	  document.body.appendChild(script);
	}

	//初始化
	function initialize() {
		myLatlng = new google.maps.LatLng(39.84, 116.4);
		var myOptions = {
			zoom: 5,  //地图的缩放级别，数字越大，地图越详细
			center: myLatlng,  //指定显示地图的中心对象
			mapTypeId: google.maps.MapTypeId.ROADMAP  //地图类型指定为 路标
		}
		//创建一个新的map相当于 显示地图图层
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	}

	//过3秒之后加载层点显示
	setTimeout(function(){
		//创建好一个marker标记之后 ，并指定在哪个map 对象上面显示。
		var marker = new google.maps.Marker({
           position: myLatlng,
           title: "Hello World!"
        });
        marker.setMap(map);
	},"3000");
</script>

</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>

3、添加层-点的点击事件 

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#map_canvas{height: 100%;}
</style>
<script type="text/javascript">  
	//显示的地图对象
	var map;
	//声明坐标对象，默认以它为地图中心点
	var myLatlng = null;
	//添加一个显示具体内容的图
	var infowindow = null;
	window.onload =  function(){
		loadScript();
		initialize();
	}
	
	//加载脚本
	function loadScript() {
	  var script = document.createElement("script");
	  script.type = "text/javascript";
	  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
	  document.body.appendChild(script);
	}

	//初始化
	function initialize() {
		myLatlng = new google.maps.LatLng(39.84, 116.4);
 		infowindow = new google.maps.InfoWindow({content: 'content', size: new google.maps.Size(50, 50), position: myLatlng});
		var myOptions = {
			zoom: 5,  //地图的缩放级别，数字越大，地图越详细
			center: myLatlng,  //指定显示地图的中心对象
			mapTypeId: google.maps.MapTypeId.ROADMAP  //地图类型指定为 路标
		}
		//创建一个新的map相当于 显示地图图层
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	}

	//过3秒之后加载层点显示
	setTimeout(function(){
		//创建好一个marker标记之后 ，并指定在哪个map 对象上面显示。
		var marker = new google.maps.Marker({
           position: myLatlng,
           title: "Hello World!",
		   content: "显示的具体内容~~"
        });
        marker.setMap(map);
		//然后为这个点添加点击事件
		google.maps.event.addListener(marker, 'click', function() {
			alert(this.title);
		});
	},"3000");
</script>

</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>

4、添加点击层-点之后的层介绍 

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#map_canvas{height: 100%;}
</style>
<script type="text/javascript">  
	//显示的地图对象
	var map;
	//声明坐标对象，默认以它为地图中心点
	var myLatlng = null;
	//添加一个显示具体内容的图
	var infowindow = null;
	window.onload =  function(){
		loadScript();
		initialize();
	}
	
	//加载脚本
	function loadScript() {
	  var script = document.createElement("script");
	  script.type = "text/javascript";
	  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
	  document.body.appendChild(script);
	}

	//初始化
	function initialize() {
		myLatlng = new google.maps.LatLng(39.84, 116.4);
 		infowindow = new google.maps.InfoWindow({content: 'content', size: new google.maps.Size(50, 50), position: myLatlng});
		var myOptions = {
			zoom: 5,  //地图的缩放级别，数字越大，地图越详细
			center: myLatlng,  //指定显示地图的中心对象
			mapTypeId: google.maps.MapTypeId.ROADMAP  //地图类型指定为 路标
		}
		//创建一个新的map相当于 显示地图图层
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	}

	//过3秒之后加载层点显示
	setTimeout(function(){
		//创建好一个marker标记之后 ，并指定在哪个map 对象上面显示。
		var marker = new google.maps.Marker({
           position: myLatlng,
           title: "Hello World!",
		   content: "显示的具体内容~~"
        });
        marker.setMap(map);
		//然后为这个点添加点击事件
		google.maps.event.addListener(marker, 'click', function() {
			infowindow.content = this.content;
			infowindow.size = new google.maps.Size(75, 75); 
			infowindow.position = this.position; 
			infowindow.open(map);
		});
	},"3000");
</script>

</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>

5、根据地址计算出坐标 

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#map_canvas{height: 100%;}
</style>
<script src=" http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
        type="text/javascript"></script>
<script type="text/javascript">  
	var geocoder = null;
	window.onload =  function(){
		initialize();
		showAddress("湖北荆州");
	}
	
	function initialize(){
		geocoder = new GClientGeocoder();
	}

	function showAddress(adress) {
		geocoder.getLatLng(adress,function(point) {
		  if(point != null){
			 var addr = point.toString().replace("(","").replace(")","").split(", ");
			 alert("经度：" + addr[0] + "纬度：" + addr[1]);
		  }
		});
	}
</script>

</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>

6、手动添加地图标记，然后显示对应的层点信息 

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0px;padding: 0px;}
#map_canvas{height: 100%;}
</style>
<script src=" http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA&hl=zh-CN"
        type="text/javascript"></script>
<script type="text/javascript">  
	//显示的地图对象
	var map;
	//声明坐标对象，默认以它为地图中心点
	var myLatlng = null;
	//添加一个显示具体内容的图
	var infowindow = null;
	var geocoder = null;

	window.onload =  function(){
		loadScript();
		initialize();
	}
	
	//加载脚本
	function loadScript() {
	  var script = document.createElement("script");
	  script.type = "text/javascript";
	  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
	  document.body.appendChild(script);
	}

	//初始化
	function initialize() {
		myLatlng = new google.maps.LatLng(39.84, 116.4);
 		infowindow = new google.maps.InfoWindow({
			content: 'content', 
			size: new google.maps.Size(50, 50), 
			position: myLatlng
		});
		var myOptions = {
			zoom: 5,  //地图的缩放级别，数字越大，地图越详细
			center: myLatlng,  //指定显示地图的中心对象
			mapTypeId: google.maps.MapTypeId.ROADMAP  //地图类型指定为 路标
		}
		geocoder = new GClientGeocoder();
		//创建一个新的map相当于 显示地图图层
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		//为地图的每一个点都添加点击事件，触发后添加层点标记，然后显示坐标
		google.maps.event.addListener(map, 'click', function(event) {
            placeMarker(event.latLng);
        });
	}
	
	//手动添加层点标记
	function placeMarker(point) {
		//根据坐标获取 地址
		var addr = point.toString().replace("(","").replace(")","").split(", ");
		geocoder.getLocations(addr[0]+","+addr[1], function(location){
			if(location.Status.code==200){
				var marker = new google.maps.Marker({
					position: point, 
					title:location.Placemark[0].address,
					content:"地址："+location.Placemark[0].address+"<br/>坐标："+point,
					map: map
				});
				map.setCenter(point); //居中显示
				//添加点击事件
				google.maps.event.addListener(marker, 'click', function() {
					infowindow.content = this.content;
					infowindow.size = new google.maps.Size(275, 275); 
					infowindow.position = this.position; 
					infowindow.open(map);
				});
			}
		});
	}

	//过3秒之后加载层点显示
	setTimeout(function(){
		//创建好一个marker标记之后 ，并指定在哪个map 对象上面显示。
		var marker = new google.maps.Marker({
           position: myLatlng,
           title: "Hello World!",
		   content: "显示的具体内容~~"
        });
        marker.setMap(map);
		//然后为这个点添加点击事件
		google.maps.event.addListener(marker, 'click', function() {
			infowindow.content = this.content;
			infowindow.size = new google.maps.Size(275, 275); 
			infowindow.position = this.position; 
			infowindow.open(map);
		});
	},"3000");

</script>

</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>




夜空中苦逼的程序员
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Google Earth 背后的故事
【CSDN】
10-24 418
Google Earth 可以说是最知名和最广泛使用的地理信息系统 (GIS) 软件。它能够创建、存储、查看与位置相关的数据并与之交互。凭借其多用途设计和广泛的工具集，该软件针对跨越教育、政府、房地产、媒体、保险和建筑的多元化用户群，以及一群忠诚的私人消费者。Google Earth 最初被称为 Keyhole，该产品在初创公司被谷歌收购后更名为 Google Earth。在被收购之前，Keyhole 已经从 CIA 的风险投资部门 In-Q-Tel 获得了大量资金。
GIS地图开发
小眼哥的博客
11-25 3897
GIS地图开发
Google地图GISAPI应用实例
11-02
本实例是有本人长期开发WebGis对GoogleMap应用的一些总结； 提供给初学者进行实例学习。
gis谷歌地图方案
01-05
Gis googlemap gmap 地图 谷歌地图，提供网页版地图开发方案，单机版地图开发方案，第三方控件开发方案.
【小沐学GIS】Google的kml文件的读写（C++、Python）
最新发布
爱看书的小沐
06-22 1175
KML 是一种文件格式，用于在地球浏览器（例如 Google 地球、Google 地图和 Google 地图移动版）中显示地理数据。KML 使用包含嵌套的元素和属性的结构（基于标记），并符合 XML 标准。所有标记都区分大小写，并且必须与 KML 参考中列出的完全一样。该参考指出了哪些标记是可选的。在给定元素内，标记必须按照参考中列出的顺序显示。Google 地球和 Google 地图可以直接读取 KML 和 KMZ 文件，并可将文件保存为 KMZ 格式。
谷歌地球二次开发代码
07-03 363
之前因为公司有一个三维GIS项目，所以花了点时间来研究，但后来因为项目的特殊性和GE的局限性，项目改成ArcGlobe，虽然项目上没进一步发展，但还是有很大的收获，所以决定将之前GE研究的成果共享，主要功能点有（GE:Google Earth）： 1）GE的二次开发，实现模型导入，基本的点、线、面图形绘制，实时更新位置等； 2）GE部署，实现了GE一键式安装部署，无需...
google map v3 GIS功能总结
dicmo的专栏
12-16 177
[img]http://dl.iteye.com/upload/attachment/368826/b3cde0d3-7532-38d2-98c9-0f1fe0d80289.jpg[/img] [img]http://dl.iteye.com/upload/attachment/368828/81773fbc-4b0f-359b-8f3f-4126032af80d.jpg[/img] ...
谷歌地球二次开发基础平台
csedisys的博客
08-20 9366
谷歌地球（GoogleEarth，简称GE）集成了地理信息系统、遥感等功能，展示了全球范围内的卫星影像和三维地形等基础地理信息数据。谷歌地球几乎可以应用于各行业的GIS领域如智慧城市、厂矿、交通、港口、农业、文物古迹保护、环保、林业、海洋和城市规划等。 谷歌地球不仅提供了三维场景中的卫星影像和三维地形、地理信息，还提供了用于二次开发的插件和强大的三维场景与图件控制功能。谷歌地球二次开发主要基于G...
【小沐学Python】Python实现TTS文本转语音（speech、pyttsx3、百度AI）
爱看书的小沐
12-10 9070
TTS(Text To Speech) 译为从文本到语音，TTS是人工智能AI的一个模组，是人机对话的一部分，即让机器能够说话。TTS是语音合成技术应用的一种，首先采集语音波形，然后进行优化处理，最后存储在数据库中，合成语音是提取波形转换成自然语音输出。Windows 语音识别允许你单独通过语音控制电脑，而无需键盘或鼠标。本文列出了可用于语音识别的命令。适用于 Python 2 和 3 的文本转语音 （TTS） 库。无需互联网连接或延迟即可工作。
google_Gis_Api
06-03
google gis api google gis api google gis api google gis api google gis api google gis api
关于地图GIS开发事项的一次实践整理（上）
发现问题，面对问题，分析问题，解决问题，总结问题
08-01 1186
【1】学会将问题进行抽象，发现问题的本质。【2】遇到一些问题，学会尝试使用一些更加灵活更加合理的方式，而不是粗暴的去解决所有问题。【3】对于一些地图GIS相关的代码应用，是否可以合理的使用一些几何算法去解决实际问题。【4】在深入了解相关知识后，发现有很多的设计都可以运用几何的方式去解决问题。比如上班打卡定位就是二维平面中两点的距离；配送网点或者商家配送的范围就是一个圆形或者多边形的区域划分。【5】此外，对于一些GIS的应用我们日常使用的中间件都或多或少的提供了一些API，这个都是之前不知道或者不曾留意...
谷歌地图-Google Map
S3132411278的博客
08-12 1716
谷歌地图 谷歌地图[1][2]是 Google 公司提供的电子地图服务，包括局部详细的卫星照片。此款服务可以提供含有全球城市政区和交通以及商业信息的矢量地图、不同分辨率的卫星照片和可以用来显示地形和等高线地形视图。在2014年3月5日谷歌表示印度22个城市的用户已经可以访问谷歌地图中75个在当地比较流行的室内场地地图，包括位于古尔冈的Ambience Mall，以及德里的Select City Walk购物中心等。2018年3月，谷歌地图加入了关于残疾人的功能，谷歌通过收集用户的数据将适合伤残人士前往的地方
谷地goodygis
04-27
谷地goodygis
webgis地图开发
01-28
webgis地图demo，openlayers、leaftletjs例子。后期添加百度和高德地图api
GoodyGIS.4.6.3
10-29
谷地是一款基于谷歌地球API开发的应用软件，旨在扩展谷歌地球的应用，辅助获取数据，提高工作效率。可应用于学术科研、工程、规划、设计等工作，在测绘、地质、交通、电力、水利、农业、林业、能源和旅游等领域，应用广泛。 谷地不生产任何数据，也不提供任何数据，通过谷地获取的所有数据均来自互联网，谷地不对所获取数据的精度、准确度、有效性等质量负责。
谷歌地球GIS高程数据提取工具
10-24
谷歌地球高程提取工具使用方法: 1) 解压后 运行 GEInfosExtra.Patched.exe (注意不是 GEInfosExtra.exe) 2) 首页弹出的对话框点击 "进入试用版系统" 3) 点击左侧 选择 "高程提取" 选项卡, 4) 点击上方"绘制图形" 按钮, 在地图上绘制一片区域 (右键点击绘制) 5) 在左侧对象识别处, 选择对象 为 "单个对象(点线面)" 6) 在地图上点击刚才绘制的图形 7) 点击高程数据提取 (GEInfosExtra.Patched.exe 已将采样间隔最小值修改为1米) 8) 点击计算高程点数 (GEInfosExtra.Patched.exe 已将采样点数量最大值修改为999999米) 9) 点击开始提取
中文版GoodyGIS
04-05
中文版GoodyGIS
基于谷歌地图的车载GIS信息平台
12-07
【基于谷歌地图的车载GIS信息平台】是一种将地理信息系统（GIS）与车载设备结合的应用，旨在为驾驶员和乘客提供实时的导航、路况信息以及其他相关服务。这个项目利用了谷歌地图API，一个强大的工具，允许开发者在...
GMdl.rar_.gmdl_google_google map_map_卫星地图
09-22
描述中的“合并 google map 卫星与普通地图”揭示了这个项目的核心目标，即整合Google Map的两种视图——卫星视图和普通街道视图，可能创建一个混合视图，让用户在同一界面上能同时看到高清晰度的卫星图像和易于理解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值