今年年初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，内有更多作品回顾和展示。您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。