在地图的边界内,随机放置一个标记【GMap 学习笔记】

本文提供了一个使用Google Maps JavaScript API的示例代码,包括如何加载API、初始化地图、设置地图中心点、调整地图类型、获取地图边界以及在地图上添加随机坐标标记。

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

 1   <! DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
 2      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
 3   < html  xmlns ="http://www.w3.org/1999/xhtml" >
 4     < head >
 5       < meta  http-equiv ="content-type"  content ="text/html; charset=utf-8" />
 6       < title > Google Maps JavaScript API Example </ title >
 7       <!-- 使用 script 标签包含 Google 地图,key传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置 -->
 8       < script  src ="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false"
 9              type ="text/javascript" ></ script >
10        < script  type ="text/javascript" >
11  
12      function  initialize() {
13       var  map =   new  GMap2(document.getElementById( " map_canvas " ));
14       // 住:缩放级别:在普通地图视图内,可以使用 0(最低缩放级别,在地图上可以看到整个世界)
15       // 到 19(最高缩放级别,可以看到独立建筑物)
16      map.setCenter( new  GLatLng( 38.881946 , 121.587964 ),  15 );
17       // 在 Google 地图 API 中,地图使用标准的“绘制”图块显示
18  
19       // 所有类型:G_NORMAL_MAP- 默认视图,
20       // G_SATELLITE_MAP - 显示 Google 地球卫星图像
21       // G_HYBRID_MAP - 混合显示普通视图和卫星视图
22       // G_DEFAULT_MAP_TYPES - 这三个类型的数组,在需要重复处理的情况下非常有用
23      map.setMapType(G_SATELLITE_MAP);
24  
25            // 获得地图边界
26         var  bounds =  map.getBounds();
27            // 获得西南角坐标
28         var  southWest =  bounds.getSouthWest();
29            // 获得东北角坐标
30         var  northEast =  bounds.getNorthEast();
31            // 计算经度差
32         var  lngSpan =  northEast.lng()  -  southWest.lng();
33            // 计算纬度差
34         var  latSpan =  northEast.lat()  -  southWest.lat();
35            // 随机产生一个经度值和一个纬度值,构成一个坐标点
36         var  point =   new  GLatLng(southWest.lat()  +  latSpan *  Math.random(),
37        southWest.lng()  +  lngSpan *  Math.random());
38            // 标记是 GMarker 类型的对象,将随机产生的坐标传给GMarker,并在地图上显示此标记。
39       map.addOverlay ( new  GMarker (point));
40     }
41       </ script >
42     </ head >
43     <!-- 使用onLoad 事件初始化地图对象 -->
44     < body  onload ="initialize()"  onunload ="GUnload()" >
45     <!-- 让其显示在网页中 -->
46       < div  id ="map_canvas"  style ="width: 600px; height: 600px" ></ div >
47     </ body >
48   </ html >
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值