Google Map API3地图页面开发笔记

今年年初Google Map就向所有采用API2开发的网站发了通知函,说5月份会停止API2,今后所有的Gmap项目都要基于API3开发,并且建议把API2项目都升级到API3。我公司网站上有一个Gmap的页面,通过读取一个feed实现所有酒店位置的显示,这是页面地址 – http://www.vhr.com/hotels.aspx。 由于太忙,一直都没时间去给这个地图做升级,等到11月,突然发现这个基于API2开发的地图不能用了,而且由于Google关闭了引用的JS,导致连调试都不能了,不得不去研究API3的文档,重新开发了。API2到API3的升级不是简单的几个函数和方法替换的事儿,API3的语法比起API2来显得更加的面向对象,还是整理思路重做吧…

项目是一个976×515px的地图,页面打开时默认显示世界地图,把feed里面所有的国家数据读取进来做上记号,地图左侧边栏显示国家名称,点击气球和国家名称进入第二级地图;
第二级地图是国家所在区域,左侧显示城市列表,地图上用记号标注城市,点击城市名称和地图记号进入第三级地图;
第三级地图是城市区域,左侧显示酒店名称,地图上用记号显示每家酒店的位置,点击酒店名称和地图记号弹出一个气球框显示酒店详细信息。
第一级的世界地图上所有的记号坐标都能在feed中找到,第二级城市的坐标则需要从第三级的酒店坐标中计算得到,计算方式是先遍历一遍feed中所有的酒店信息,找到city属性,然后建立新的数组对象,按照city名称重新整理酒店。把每个city里面所有的酒店坐标算一个平均数,就得到了city的坐标,也就是第二级地图里面记号的坐标

先看API3的文档,整理出来我要的初始化脚本,今后做其他Gmap项目稍作修改都可以直接拿来用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function gMap_initialize() {
	var mapOptions = {//为地图建立一个设置对象
		center: new google.maps.LatLng( 0,0 ),
		zoom: 2,//第一级地图缩放到2就能在我的画布上显示全世界了
		panControl: true,
		panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT}, //调整默认方向控制面板的位置
		zoomControl: true,
		zoomControlOptions: {
			style: google.maps.ZoomControlStyle.LARGE,
			position: google.maps.ControlPosition.TOP_RIGHT //调整默认缩放控制面板的位置
		},
		mapTypeControl: true,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
			position: google.maps.ControlPosition.TOP_RIGHT //调整默认地图选择面板的位置
		},
	};
	map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);//加载地图
 
	ajaxRequest(gMap_dataSource);//AJAX加载数据,feed已经是JSON格式
}

然后是为3个级别的地图和左列表定义方法函数:

1
2
3
4
5
6
7
gMap_showCountry(){..} //在世界地图上显示国家
gMap_listCountry(){..} //在左侧列表上显示国家
gMap_showCity(_countryId){..} //在国家地图上显示城市
gMap_listCity(_countryId){..} //在列表上显示城市
gMap_showHotel(_cityName, _cityCoords){..} //在城市地图上显示酒店,需要预先定位好城市坐标中心,所以多加了个参数
gMap_listHotel(_cityName){..} //在列表上显示酒店
function gMap_sortList() //为列表按字母排序

总篇幅很长,这里只整理思路,代码就不复制了。。
Gmap API3看了半天,这个程序写了一天半,总共历时两天完成,回过头来再看程序写得比较松散,等有空再好好整理一下。

这里把地图加载进来:

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/190.html。百度和各类采集站皆不可信,搜索请谨慎鉴别。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以查看本文的最新版本。

如本文对你有用,请在页面右侧栏扫码领取我的支付宝红包,作为打赏吧 (喂到底是我赏你还是你赏我啊-_-!)

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

发表评论

电子邮件地址不会被公开。 必填项已用*标注