使用Google Map进行地点标注-优快云博客

本文介绍了一段JSP代码，该代码利用Google Maps API在网页上显示地图，并在特定位置标注了多个标记。这些标记代表了中国境内的湖泊、城市和其他地理特征。

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

[b][size=large]把此jsp代码直接复制到文件中，即可看到效果，如附件图片一样。[/[/size]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>