[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
分享到:
相关推荐
Google Map MarkerCluster使用簡介 可使用此方式使marker自動表現群聚 相當的方便!
但是,对于我来说,在ASP.NET页面中使用JavaScript来调用Google Map的API有一定难度,尤其是利用服务器端函数来动态画出Google Map。例如,我想从SQL Server中读取经纬度信息,然后在Google Map中插入一个点。如果...
google map v3开发 V3地图搜素,V3地图标注,V3地图多点标注
实现Google地图 地图上的标注 城市介绍等等。。。。
谷歌地图应用说明 Michael-Tian 基础知识 正向标注 反向标注 任意多边形 自定义GMarker 地图控件与地图属性 空间数据类型 参考资料 Demo
GoogleMap地图控件应用源码 Asp.net版的GoogleMap地图控件应用源码,可以按照普通地图和卫星地图进行显示及二次开发应用 集合ajax实现无刷新,可以进行标注、设置显示交通路线等
VS2008制作的GoogleMap二次开发Demo源码, 在WinForm窗体中添加GoogleMap地图,可在地图中添加文本标注,可以编译通过正确运行。
使用谷歌地图API接口实现对地图进行标注
正向标注 反向标注 任意多边形 自定义GMarker 地图控件与地图属性 空间数据类型 参考资料 Demo Google 地图 API 概念 Google 地图的“Hello, World” 加载 Google 地图 API 地图 DOM 元素 GMap2 - 基本对象 初始化...
针对定位跟踪等应用领域的实际需求, 阐述了桌面应用程序嵌入Goog le Map 电子地图的基本方法, 研究了桌面程序与之进行交互操作实现路径, 并给出了一个基于GPS 的远程实时定位监测实验案例. 实验系统由桌面定位程序...
由于工作需要,又要开始看Google Map API 代码,今天再把我之前的GoogleMap类,又更新了下,加了个简单的用户自定义标注坐标的功能。看看吧(代码没怎么优化,别见笑)
学习flex后的地图小例子,在地图上的属性查询,级地图上坐标的标注
基于google map api 开发的地图程序,可以通过在mapsdata.xml中加入需要标注的地点的经纬度,来实现地图显示的功能
VB 调用GoogelMap示例 VB控制GoogelMap实现加载地图、控制偏移、添加删除标记点等。 思路: VB调用WebBrowser控件加载本地页面打开GoogelMap。...再调用所打开页面的javascript脚本函数实现定位和添加标注等功能。
Asp.net版的GoogleMap地图控件应用源码,可以按照普通地图和卫星地图进行显示及二次开发应用集合ajax实现无刷新,可以进行标注、设置显示交通路线等。
Asp.net版的GoogleMap地图控件应用源码,可以按照普通地图和卫星地图进行显示及二次开发应用 集合ajax实现无刷新,可以进行标注、设置显示交通路线等 如果提示ApiKey不可用,则到 ...
内容包含了谷歌地图的基本功能,包括:收索地点、标注、填写标注信息、响应地图(点击、双击、经过)事件。一个比较复杂的难点是:点击地图上的标注时,把这一‘事件’关联到上级DELPHI应用层面,DELPHI可以读取到...
Asp.net版的GoogleMap地图控件应用源码,各种使用样式,可以按照普通地图和卫星地图进行显示及二次开发应用 集合ajax实现无刷新,可以进行标注、设置显示交通路线等!