time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > 其它JS框架 > Google Map 在产品中的应用

Google Map 在产品中的应用

时间:2011-03-16 00:21 点击:699次 字体:[ ]




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

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


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

  二、封装自定义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 = 0; 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后的地图效果截图为:

Google Map 在产品中的应用_www.fengfly.com

  三、小结


    本篇中的目标地点“武汉大厦”使用了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.fengfly.com/plus/view-197141-1.html
标签: Google map
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: