`

使用Google Map进行地点标注

    博客分类:
  • web
阅读更多
[b]把此jsp代码直接复制到文件中,即可看到效果,如附件图片一样。[/b]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<%@ page contentType="text/html; charset=UTF-8" language="java"
		errorPage=""%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
	<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
	<html>
		<head>
			<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
			<script type="text/javascript">
			var map;
		
			function initialize() {
				var myLatlng = new google.maps.LatLng(79.26, 155.25);
				var myOptions = {
					zoom : 4,
					center : myLatlng,
					mapTypeId : google.maps.MapTypeId.ROADMAP
				}
		
				map = new google.maps.Map(document.getElementById("map_canvas"),
						myOptions);
		
				// Add 5 markers to the map at random locations
				var southWest = new google.maps.LatLng(39.26, 115.25);
		
				var northEast = new google.maps.LatLng(21.363882, 130.044922);
				var bounds = new google.maps.LatLngBounds(southWest, northEast);
				map.fitBounds(bounds);
				var lngSpan = northEast.lng() - southWest.lng();
				var latSpan = northEast.lat() - southWest.lat();
		
				for ( var i = 0; i < 5; i++) {
					//伊塞克湖
					var location = new google.maps.LatLng(42.40, 77.29);
					//博斯腾湖
					var location2 = new google.maps.LatLng(42.00, 87.02);
					//色林错湖
					var location3 = new google.maps.LatLng(31.75, 89.00);
					//纳木错湖
					var location4 = new google.maps.LatLng(30.65, 90.57);
					//达里诺尔
					var location5 = new google.maps.LatLng(43.33, 116.62);
					//武威
					var location6 = new google.maps.LatLng(38.10, 102.97);
					//榆林石窟
					var location7 = new google.maps.LatLng(40.23, 95.50);
					//米兰
					var location8 = new google.maps.LatLng(39.12, 88.73);
					//策勒
					var location9 = new google.maps.LatLng(36.83, 80.83);
					//图木舒克
					var location10 = new google.maps.LatLng(39.77, 80.02);
					//二连浩特
					var location11 = new google.maps.LatLng(43.60, 112.13);
					//茶卡盐湖
					var location12 = new google.maps.LatLng(36.70, 99.10);
					//柴达木盐碱
					var location13 = new google.maps.LatLng(38.58, 93.12);
					//鄂陵湖
					var location14 = new google.maps.LatLng(34.90, 97.58);
					//格尔木
					var location15 = new google.maps.LatLng(36.33, 94.68);
					//洱海
					var location16 = new google.maps.LatLng(25.78, 100.18);
					//呼伦贝尔湖
					var location17 = new google.maps.LatLng(48.93, 117.60);
					//塔克拉玛干沙漠
					var location18 = new google.maps.LatLng(39.83, 80.17);
		
					var marker = new google.maps.Marker( {
						position : location,
						map : map,
						title : "伊塞克湖"
					});
		
					var marker2 = new google.maps.Marker( {
						position : location2,
						map : map,
						title : "博斯腾湖"
		
					});
		
					var marker3 = new google.maps.Marker( {
						position : location3,
						map : map,
						title : "色林错湖"
		
					});
		
					var marker4 = new google.maps.Marker( {
						position : location4,
						map : map,
						title : "纳木错湖"
		
					});
		
					var marker5 = new google.maps.Marker( {
						position : location5,
						map : map,
						title : "达里诺尔"
		
					});
		
					var marker6 = new google.maps.Marker( {
						position : location6,
						map : map,
						title : "武威"
		
					});
		
					var marker7 = new google.maps.Marker( {
						position : location7,
						map : map,
						title : "榆林石窟"
		
					});
		
					var marker8 = new google.maps.Marker( {
						position : location8,
						map : map,
						title : "米兰"
		
					});
		
					var marker9 = new google.maps.Marker( {
						position : location9,
						map : map,
						title : "策勒"
		
					});
		
					var marker10 = new google.maps.Marker( {
						position : location10,
						map : map,
						title : "图木舒克"
		
					});
		
					var marker11 = new google.maps.Marker( {
						position : location11,
						map : map,
						title : "二连浩特"
		
					});
		
					var marker12 = new google.maps.Marker( {
						position : location12,
						map : map,
						title : "茶卡盐湖"
		
					});
		
					var marker13 = new google.maps.Marker( {
						position : location13,
						map : map,
						title : "柴达木盐碱"
		
					});
		
					var marker14 = new google.maps.Marker( {
						position : location14,
						map : map,
						title : "鄂陵湖"
		
					});
		
					var marker15 = new google.maps.Marker( {
						position : location15,
						map : map,
						title : "格尔木"
		
					});
		
					var marker16 = new google.maps.Marker( {
						position : location16,
						map : map,
						title : "洱海"
		
					});
		
					var marker17 = new google.maps.Marker( {
						position : location17,
						map : map,
						title : "呼伦贝尔湖"
		
					});
		
					var marker18 = new google.maps.Marker( {
						position : location18,
						map : map,
						title : "塔克拉玛干沙漠"
		
					});
				}
			}
		</script>
		</head>
		<body onload="initialize()">
			<div style="width: auto; height: 500px;">
				<!--google地图-->
				<div id="map_canvas" style="width: 100%; height: 100%;">
					
				</div>
			</div>
		</body>
	</html>
  • 大小: 433.9 KB
1
0
分享到:
评论

相关推荐

    GoogleMap谷歌地图demo

    GoogleMap API提供了一系列接口,如地图视图、标记(Markers)、信息窗口(InfoWindows)、折线(Polylines)和多边形(Polygons)等,用于显示地理位置、添加标注、绘制路径等。此外,API还支持地理编码(Geocoding...

    谷歌地图的标注隐藏与显示

    在进行谷歌地图开发时,为了增强地图的信息性和交互性,开发者经常会向地图上添加各种标注。这些标注不仅能够帮助用户更直观地理解特定地理位置的相关信息,还能根据用户的兴趣或需求动态地显示或隐藏。然而,在实现...

    Google Map MarkerCluster使用簡介

    Google Map MarkerCluster 使用簡介 Google Map MarkerCluster 是 Google Map API 中的一個功能強大且實用的工具,它可以幫助開發者快速實現地圖標記的聚合功能。下面是 MarkerCluster 的使用簡介: MarkerCluster...

    使用google map的API开发的LBS小软

    3. **显示地图**:通过调用GoogleMap对象的setMapType()方法,可以设置地图类型(如卫星图、普通地图或地形图)。同时,通过setCameraPosition()或animateCamera()可以调整地图的视角和中心点。 4. **标注和覆盖物*...

    Google Map API 使用详解

    3. **用户数据**:用户使用 Google Map API 在地图上标注的数据。这类数据由用户自行管理。 对于使用 Google Map API 的场景而言,地图上的数据存储取决于数据的类型。如果是谷歌提供的数据,则由谷歌负责存储和...

    google map v3,V3地图搜素,V3地图标注

    在V3 API中,我们使用`google.maps.Marker`类来创建标注。首先,需要设置标注的位置,然后可以自定义其外观,如图标、颜色、是否可点击等。例如: ```javascript var marker = new google.maps.Marker({ position:...

    get_google_map_1.4.zip

    "matlab"指明了编程语言,"algorithm"暗示了该程序包可能包含用于处理地图数据的算法,而"googlemap"和"map"则直接指出其与谷歌地图和地图操作相关。 在压缩包中,有两个文件:“license.txt”和“get_google_map”...

    在ASP.NET中使用Google Map

    但是,对于我来说,在ASP.NET页面中使用JavaScript来调用Google Map的API有一定难度,尤其是利用服务器端函数来动态画出Google Map。例如,我想从SQL Server中读取经纬度信息,然后在Google Map中插入一个点。如果...

    谷歌地图应用GoogleMap

    谷歌地图应用GoogleMap是一款基于Google提供的地图服务开发的应用程序,它允许用户进行一系列与地理位置相关的操作,如搜索城市、选择定位、切换浏览模式等。在移动设备上,这样的应用为用户提供了一个直观且实用的...

    Google Map 地图描绘运动轨迹

    在IT领域,尤其是在移动应用开发或者地理信息系统(GIS)中,使用地图API来描绘运动轨迹是一项常见的需求。本文将深入探讨如何使用...在实际开发过程中,还可以结合压缩包中的"GoogleMap"文件进行更深入的学习和实践。

    googleMap地图

    在本项目中,“googleMap地图”是一个基于Flex技术实现的地图应用示例,用于展示如何在地图上进行属性查询以及标注坐标点。Flex是一种用于构建富互联网应用程序(RIA)的开发框架,它基于ActionScript编程语言和...

    GoogleMap的简单使用

    "GoogleMap的简单使用"这个主题主要涵盖了如何在Android应用中引入和操作Google Maps API,以实现地图浏览、定位、标注等功能。这里我们将深入探讨如何在Android项目中集成Google Maps SDK,并进行基本的操作。 ...

    GoogleMap定位系统、与Webservice连接

    在IT行业中,GoogleMap定位系统和与Web服务的连接是两个关键的技术领域,它们在现代移动应用和Web应用中有着广泛的应用。以下是这些技术的详细解释: **GoogleMap定位系统**: GoogleMap定位系统是Google提供的一项...

    google MAP定位

    本文将深入探讨Google Map定位的功能、实现原理以及如何在实际项目中进行集成和应用。 首先,Google Maps定位服务是基于谷歌地图API(Application Programming Interface)提供的,它允许开发者在自己的应用中嵌入...

    谷歌地图开发包GoogleMap

    文件“S.Sams.GoogleMap.Web”可能是包含示例代码或者教程的资源,可以帮助开发者更快地理解和使用Google Maps API。在学习和使用这个开发包时,开发者需要注意API的使用限制,如每日请求次数、API密钥管理等,确保...

    稻歌Google Map截获器 2.2官方版.rar

    总的来说,《稻歌Google Map截获器 2.2官方版》是专业人员进行地图相关工作的重要工具,其强大的截图和处理功能,使得地理信息的获取和利用变得更加便捷。无论是在科研、教学还是实际操作中,都能发挥出显著的效果。

    AndroidNDK.rar_GoogleMap_android

    2. 基于GoogleMap的个人GPS:结合NDK进行高效的定位和地图显示,提供个性化的导航服务。 3. 豆瓣客户端:可能使用NDK加速数据请求和解析,同时利用Google Map展示地理位置信息。 4. 在线音乐播放器:可能通过NDK实现...

    Google_Map_API谷歌地图.ppt

    本文将详细介绍Google Maps API的基础知识、正向标注、反向标注、任意多边形、自定义GMarker、地图控件与地图属性以及空间数据类型。 **基础知识** 1. **Google Maps API概念**:它是一套JavaScript库,可以嵌入到...

Global site tag (gtag.js) - Google Analytics