页面中加入Google地图

最新推荐文章于 2024-02-14 12:40:33 发布

n0EMa

最新推荐文章于 2024-02-14 12:40:33 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： web开发文章标签： google地图 map google

本文链接：https://blog.youkuaiyun.com/liu_si_yan/article/details/18706215

web开发专栏收录该内容

2 篇文章

订阅专栏

本文指导您如何通过GoogleAPI创建动态地图，并提供了详细的代码实现和地图坐标展示。

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

首先需要申请一个Google API的密钥，至于怎么申请，这里就不多说了，上代码

<script src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAAcEGF_-3GOiyvtzkjQXPfoRQllSs0KifCgQzpJplfE6gSGiLJ3xSjGoVpjoIsC69p5BCp8PUpWZK9ow&hl=zh-CN" type="text/javascript"></script>
		<!--蓝色部分的是Google API密钥-->
		<script type="text/javascript">
			function initialize() 
			{
				 if (GBrowserIsCompatible()) 
				  {
				  	  var map = new GMap2(document.getElementById("map_canvas"));
				  	    map.setCenter(new GLatLng(32.042248, 118.470226), 12);  //坐标值
				  	    map.enableScrollWheelZoom();	//允许滚轮
				  	    map.addMapType(G_PHYSICAL_MAP); 	//添加地形选项
				  	    map.addControl(new GLargeMapControl());
				  	    map.addControl(new GMapTypeControl());
				  	    
				  	    var point = new GLatLng(32.042248, 118.470226);
				  	    map.addOverlay(new GMarker(point));
				  }
 }
 </script>
 <div id="map_canvas" style="width: 1024px; height: 600px;"></div>
 <script type="text/javascript">
 	  initialize();
 </script>

代码中所指坐标为南京江北某地，Google Earth中可取得坐标

将此段代码放入页面即可显示Google地图