利用google 地图展示酒店所在位置

利用google map展示酒店所在位置

? 公司用到了google maps，定位各个酒店在地图中位置。今天做一个简单的总结，关键是记下不同于Demo级别的在地图上加上几个经纬度图标完事的几个细节的处理。

??? 值得注意的需求是地图级别的设置，既要在可见区域包含所有的point,又要将地图缩进在最佳视觉状态（用直白的语言描述，地图可见范围内包含所有酒店的位置图标，并且可见地图区域的放大级别是最合适的）。

? 开始的时候并没有深入去看google map api，后来才发现

UI.Map = Class.create({initialize: function(mapid) {this.mapDiv = $(mapid);this.map = null;this.bounds = null;this.mapOverlays = new Array();},addPoint: function(item) {var latLon = new GLatLng(item.lat, item.lon);var overlay = this._createMarker(latLon, this.map);this.map.addOverlay(overlay); this.mapOverlays.push(overlay);this.bounds.extend(latLon);if(this.mapOverlays.length > 1) {this.map.setZoom(this.map.getBoundsZoomLevel(this.bounds));this.map.setCenter(this.bounds.getCenter());} else {this.map.setCenter(latLon);}},clear: function(p) {if(this.map == null) {this.show();}this.map.closeInfoWindow();this.mapOverlays.each(function(item) {this.map.removeOverlay(item);}.bind(this));this.mapOverlays = new Array();this.bounds = new GLatLngBounds();this.map.setZoom(12);},show: function() {if (GBrowserIsCompatible()) {this.map = new GMap2(this.mapDiv); this.map.setCenter(new GLatLng(0, 0), 12); this.map.addControl(new GSmallZoomControl3D()); this.map.addControl(new GMapTypeControl()); this.map.enableContinuousZoom(); }}});

?

?

?

?

2.设置地图中心点（一定要在实例化GMap2后立刻设置一个中心点才可以用，否则地图会很怪异，呵，应该说显示的类似是世界地图蓝色海洋远观图）

3、设置地图的经纬度边界矩形。要用到GLatLngBounds.? google map api reference上面这么描述这个类：

A var latLon = new GLatLng(o.lat, o.lon); var overlay =this.createMarker(latLon, letter,describe,mapurl,Map.map); Map.map.addOverlay(overlay);

?

createMarker方法也贴出来：

   createMarker:function(point, letter,desc,urlName,map){var baseIcon = new GIcon();baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";baseIcon.iconSize = new GSize(20, 34);baseIcon.shadowSize = new GSize(37, 34);baseIcon.iconAnchor = new GPoint(9, 34);baseIcon.infoWindowAnchor = new GPoint(9, 2);baseIcon.infoShadowAnchor = new GPoint(18, 25);var icon=new GIcon(baseIcon); icon.image="/images/en/markers/markers"+letter+".png";var marker = new GMarker(point, icon);GEvent.addListener(marker, "mouseover", function() {   // marker.openInfoWindowHtml(desc);          marker.openExtInfoWindow(              map,               "custom_info_window_red",              desc,              {beakOffset: 3}            );        });return marker;},

?

?map效果图：