Google Map 在产品中的应用

     最近由于工作需要研究了下Google地图，网络上也有不少相关文章。同时Google已经提供了很详尽的API及说明。我在使用Google API期间有部分内容还是值得拿出来于园友分享的。

   一、调用Google Map API  无法出现周边生活设施

       当我们使用Google API 提供的方法，将Google Map 加载到自己的html表单中。此时在地图上只能看见目标地点，并不能看见目标地点的周边生活设置，比如周边的银行、学校、超市等。此功能Google未提供在API中直接调用。截图如下：

  二、封装自定义GMapMaker 对象

  上图中的显示效果从用户交互上来说，不是太理想。现在为Google Map 新增周边生活设施，让地图上的元素更加丰富。封装一段js代码。该代码如下：

GMapMark

1 /*
2 *Author:Ryan Ding
3 *Date:2010-03-09
4 *Summary：GMapMark 类 将 Google API Local Search 查询到的内容写入google map中。
5   */
6
7   var GMapMaker =
8   function () {
9 var gSize = new GSize( 16 , 16 );
10 var restaurantIcon = new GIcon(G_DEFAULT_ICON);
11 restaurantIcon.image = " restaurant.png " ;
12 restaurantIcon.iconSize = gSize;
13 restaurantIcon.iconAnchor = new GPoint( 8 , 20 );
14 restaurantIcon.shadow = "" ;
15
16 var bankIcon = new GIcon(G_DEFAULT_ICON);
17 bankIcon.image = " bank.png " ;
18 bankIcon.iconSize = gSize;
19 bankIcon.iconAnchor = new GPoint( 8 , 20 );
20 bankIcon.shadow = "" ;
21
22 var shoppingIcon = new GIcon(G_DEFAULT_ICON);
23 shoppingIcon.image = " shopping.png " ;
24 shoppingIcon.iconSize = gSize;
25 shoppingIcon.iconAnchor = new GPoint( 8 , 20 );
26 shoppingIcon.shadow = "" ;
27
28 var schoolIcon = new GIcon(G_DEFAULT_ICON);
29 schoolIcon.image = " school.png " ;
30 schoolIcon.iconSize = gSize;
31 schoolIcon.iconAnchor = new GPoint( 8 , 20 );
32 schoolIcon.shadow = "" ;
33
34 var hospitalIcon = new GIcon(G_DEFAULT_ICON);
35 hospitalIcon.image = " hospital.png " ;
36 hospitalIcon.iconSize = gSize;
37 hospitalIcon.iconAnchor = new GPoint( 8 , 20 );
38 hospitalIcon.shadow = "" ;
39
40 var marketIcon = new GIcon(G_DEFAULT_ICON);
41 marketIcon.image = " market.png " ;
42 marketIcon.iconSize = gSize;
43 marketIcon.iconAnchor = new GPoint( 8 , 20 );
44 marketIcon.shadow = "" ;
45
46
47 var _opts = {
48 keyWord: " 餐厅 " ,
49 latlng: new GLatLng( 24.467571 , 118.113155 ),
50 icon: new GIcon(G_DEFAULT_ICON),
51 zoom: 14 ,
52 searchSize: 8
53 };
54
55 // alert("GMarker init");
56   google.load( ' search ' , ' 1 ' );
57
58 var initSettings = function (opts) {
59 _opts.latlng = opts.latlng || new GLatLng( 24.467571 , 118.113155 );
60 _opts.zoom = 14 ;
61 }
62
63 var addMark = function (latlng, title, desc, icon_) {
64 var mark = new GMarker(latlng, { icon: icon_ || new GIcon(G_DEFAULT_ICON), title: title });
65 var html = desc;
66 GEvent.addListener(mark, ' click ' , function () {
67 mark.openInfoWindowHtml(html);
68 });
69 // mark.openInfoWindowHtml(html);
70   this .map.addOverlay(mark);
71 };
72
73 var proccesslocalSearch = function (gSearch, keyWord, icon_) {
74 gSearch.setResultSetSize(GSearch.LARGE_RESULTSET); // LARGE_RESULTSET FILTERED_CSE_RESULTSET
75 gSearch.setCenterPoint(_opts.latlng, _opts.zoom);
76 gSearch.setSearchCompleteCallback( this , function () {
77 for ( var i = ; i < gSearch.results.length; i ++ ) {
78 addMark( new GLatLng(gSearch.results[i].lat, gSearch.results[i].lng),
79 gSearch.results[i].title,
80 gSearch.results[i].title, icon_);
81 }
82 });
83 gSearch.execute(keyWord);
84 }
85
86 var onLoadBank = function () {
87 var localSearch = new google.search.LocalSearch();
88 proccesslocalSearch(localSearch, " 银行 " , bankIcon);
89 }
90
91 var onLoadSchool = function () {
92 var localSearch = new google.search.LocalSearch();
93 proccesslocalSearch(localSearch, " 学校 " , schoolIcon);
94
95 }
96
97 var onLoadRestaurant = function () {
98 var localSearch = new google.search.LocalSearch();
99 proccesslocalSearch(localSearch, " 餐饮 " , restaurantIcon);
100
101 }
102
103 var onLoadMarket = function () {
104 var localSearch = new google.search.LocalSearch();
105 proccesslocalSearch(localSearch, " 超市 " , restaurantIcon);
106
107 }
108
109 var onLoadHospital = function () {
110 var localSearch = new google.search.LocalSearch();
111 proccesslocalSearch(localSearch, " 医院 " , hospitalIcon);
112
113 }
114
115
116 return {
117 autoSetMapPoint: function (ops) {
118 // alert("autoSetMapPoint");
119 initSettings(ops);
120 google.setOnLoadCallback(onLoadBank);
121 google.setOnLoadCallback(onLoadSchool);
122 google.setOnLoadCallback(onLoadRestaurant);
123 google.setOnLoadCallback(onLoadMarket);
124 google.setOnLoadCallback(onLoadHospital);
125
126 }
127 }
128 } ();
129

GMapMark代码很简单，主要使用了Google API 中的 Google Local Search 方法，把Local Search 查询到的周边设施加入到地图中。使用GmapMark后的地图效果截图为：

  三、小结

    本篇中的目标地点“武汉大厦”使用了elabel.js这个javascript 类库，您如果感兴趣可以去这里下载：http://econym.org.uk/gmap/elabel.htm。相关Google Map API 可以在这里查阅：http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/controls.html。

原文链接： http://www.cnblogs.com/ryanding/archive/2011/03/15/1978199.html