利用WeX5集成百度地图

最近做一个地图类的app
经过几天的摸索，终于完成百度地图集成的界面
先看效果：
1、加载完成之后，页面加载制定位置的地图

2、顶部能够输入地图的关键字，地图显示符合条件的下拉列表

3、用户选择了相应的选项后，地图会移动到对应的地图范围，同时标题栏显示对应位置信息

4、当用户点击地图其他位置时，标识点移动到对应位置，标题栏的位置信息相应改变
5、当用户点击确认按钮时，用alert将当前标识点的地理信息alert出来

只需要把对应的代码片段复制到WeX5工具（开源免费的一个app开发工具）中相应的.w,.js..css中，右键浏览器运行就可以实地看到效果了

1. <?xml version="1.0" encoding="utf-8"?>
2. <div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;"
3. xid="window" class="window">
4. <div component="$UI/system/components/justep/model/model" xid="model" style="left:18px;top:83px;height:244px;"
5. onLoad="modelLoad">
6. <div component="$UI/system/components/justep/data/data" autoLoad="true"
7. xid="statusData" autoNew="false" idColumn="editStatus">
8. <column label="编辑状态" name="editStatus" type="String" xid="xid1"></column>
9. <data xid="default1">[{&quot;editStatus&quot;:&quot;编辑&quot;}]</data>
10. <column label="当前维度" name="curLng" type="String" xid="xid2"></column>
11. <column label="当前经度" name="curLat" type="String" xid="xid3"></column>
12. <column label="省份" name="province" type="String" xid="xid4"></column>
13. <column label="城市" name="city" type="String" xid="xid5"></column>
14. <column label="县区" name="district" type="String" xid="xid6"></column>
15. <column label="镇级街道" name="street" type="String" xid="xid7"></column>
16. <column label="街道号" name="streetNumber" type="String" xid="xid8"></column>
17. <column label="商业名称" name="business" type="String" xid="xid9"></column>
18. <column label="地址" name="address" type="String" xid="xid10"></column></div>
19. </div>
20. <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"/>
21. <div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"
22. xid="panel1">
23. <div class="x-panel-top" xid="top1">
24. <div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar tb-index"
25. xid="titleBar1">
26. <div class="x-titlebar-left" xid="div1">
27. <a component="$UI/system/components/justep/button/button" class="btn btn-link btn-only-icon"
28. label="搜索" xid="button6" icon="icon-chevron-left" onClick="{operation:'window.close'}">
29. <i xid="i6" class="icon-chevron-left"/>
30. <span xid="span6">搜索</span>
31. </a>
32. </div>
33. <div class="x-titlebar-title" xid="div2" bind-click="div2Click">
34. <div class="form-group has-feedback" xid="formGroup1">
35. <div xid="div403" style="display:none;" bind-visible=" $model.statusData.val(&quot;editStatus&quot;)  !='编辑'" bind-text=' $model.statusData.val("address")'>
36. </div>
37. <input component="$UI/system/components/justep/input/input" class="form-control input-sm text-white"
38. id="suggestId" placeHolder="输入搜索" bind-visible=" $model.statusData.val(&quot;editStatus&quot;)=='编辑'"/>
39. <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"/>
40. <!-- <i class="icon-ios7-search-strong form-control-feedback" xid="iSearch"/>  -->
41. </div>
42. </div>
43. <div class="x-titlebar-right reverse" xid="div3">
44. <a component="$UI/system/components/justep/button/button" class="btn x-yellow btn-only-label more"
45. label="确定" xid="searchBtn" onClick="searchBtnClick" bind-enable=' $model.statusData.val("curLng")'>
46. <i xid="i11"/>
47. <span xid="span10">确定</span>
48. </a>
49. </div>
50. </div>
51. </div>
52. <div xid="baiduMap" class="x-panel-content"/>
53. </div>
54. </div>

1. define(function(require){
2. var $ = require("jquery");
3. var justep = require("$UI/system/lib/justep");
4. var map;
5. var Model = function(){
6. this.callParent();
7. };
8. Model.prototype.modelLoad = function(event){
9. var id = this.getIDByXID("baiduMap");
10. var self = this;
11. var data=this.comp("statusData");
12. window._baiduInit = function() {
13. map = new BMap.Map(id,{minZoom:2,enableMapClick:false});                //创建地图对象，可以设置地图缩放最大最小级别，设置是否显示POI点击
14. var geoc = new BMap.Geocoder();
15. //map.centerAndZoom("长春",11);                                                                        //以城市名称为参数设置地图
16. map.centerAndZoom(new BMap.Point(125.276579, 43.852057), 13);        //以坐标点为中心设置地图
17. //map.addControl(new BMap.MapTypeControl());                                                //添加地图显示类型控件（地图，卫星图，和3D模型显示）
18. //map.disableDragging();                                                                                 //设置地图禁止拖动
19. map.enableScrollWheelZoom(true);                                                                 //设置允许鼠标滚轮缩放地图
20. map.enableContinuousZoom();                                                                                //设置连续缩放
21. var pointA = new BMap.Point(125.310364,43.873797);                          // 创建点坐标A
22. var pointB = new BMap.Point(125.367928,43.857159);                          // 创建点坐标B
23. var pointC = new BMap.Point(125.319132,43.830163);                                 // 创建坐标C
24. //alert('从A点到B点的距离是：'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位
25. //在地图上添加折线
26. /*        var polyline = new BMap.Polyline([pointA,pointB,pointC], {strokeColor:"red", strokeWeight:4, strokeOpacity:0.5});  //定义折线
27. map.addOverlay(polyline);                                                                             //添加折线到地图上
28. */
29. /*        var bs = map.getBounds();                                                                           //获取可视区域
30. var bssw = bs.getSouthWest();                                                                           //拿到可视区域左下角
31. var bsne = bs.getNorthEast();                                                                   //拿到可视区域右上角
32. alert("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);
33. */
34. /*        setTimeout(function(){
35. map.panTo(new BMap.Point(113.262232,23.154345));                           //两秒后移动到广州
36. }, 2000);
37. */
38. //设置地图显示范围，如果用户在平移地图超过设置区域，会弹回设置区域
39. /*        var b = new BMap.Bounds(new BMap.Point(125.147942, 43.964754),new BMap.Point(125.550382, 43.806325));
40. try {
41. BMapLib.AreaRestriction.setBounds(map, b);
42. } catch (e) {
43. alert(e);
44. }
45. */
46. /*        var bottom_right_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});// 右下角，添加比例尺
47. map.addControl(bottom_right_control);
48. */
49. //右上角，添加默认缩放平移控件
50. /*var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
51. //BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮
52. map.addControl(top_right_navigation);
53. */
54. // 添加定位控件
55. /*                 var geolocationControl = new BMap.GeolocationControl();
56. geolocationControl.addEventListener("locationSuccess", function(e){
57. // 定位成功事件
58. var address = '';
59. address += e.addressComponent.province;
60. address += e.addressComponent.city;
61. address += e.addressComponent.district;
62. address += e.addressComponent.street;
63. address += e.addressComponent.streetNumber;
64. self.comp("tittle1").set({"title":address});
65. });
66. geolocationControl.addEventListener("locationError",function(e){
67. // 定位失败事件
68. alert(e.message);
69. });
70. map.addControl(geolocationControl);
71. */
72. //添加城市列表
73. /*        var size = new BMap.Size(10, 20);                        //定义控件偏移量
74. map.addControl(new BMap.CityListControl({
75. anchor: BMAP_ANCHOR_TOP_LEFT,
76. offset: size,
77. // 切换城市之间事件
78. onChangeBefore: function(){
79. alert('城市切换之前事件');
80. },
81. // 切换城市之后事件
82. onChangeAfter:function(){
83. alert('城市切换之后事件');
84. }
85. }));
86. */
87. /*        map.addEventListener("click",function(e){                        //增加鼠标点击事件
88. //alert(e.point.lng + "," + e.point.lat);
89. });
90. */
91. //在地图两点上生成一条路线规划
92. /*        var myP1 = new BMap.Point(125.283837,43.815675);    //起点
93. var myP2 = new BMap.Point(125.352396,43.869804);    //终点
94. var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例
95. driving2.search(myP1, myP2);    //显示一条公交线路
96. */
97. map.addEventListener("click",function(e){                        //增加鼠标点击事件
98. map.clearOverlays();
99. map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)));           //增加点
100. geoc.getLocation(e.point, function(rs){
101. var addComp = rs.addressComponents;
102. data.setValue("curLng",rs.point.lng);
103. data.setValue("curLat",rs.point.lat);
104. data.setValue("province",addComp.province);
105. data.setValue("city",addComp.city);
106. data.setValue("district",addComp.district);
107. data.setValue("street",addComp.street);
108. data.setValue("streetNumber",addComp.streetNumber);
109. data.setValue("business",rs.business);
110. data.setValue("address",rs.address);
111. //G("div403").innerHTML = addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
112. self.comp("statusData").setValue("editStatus","查看");
113. });
114. });
115. function G(id) {
116. return document.getElementById(id);
117. }
118. var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
119. {"input" : "suggestId",
120. "location" : map
121. });
122. /*        ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
123. var str = "";
124. var _value = e.fromitem.value;
125. var value = "";
126. if (e.fromitem.index > -1) {
127. value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
128. }
129. str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
130. value = "";
131. if (e.toitem.index > -1) {
132. _value = e.toitem.value;
133. value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
134. }
135. str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
136. G("searchResultPanel").innerHTML = str;
137. });*/
138. var myValue;
139. ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
140. var _value = e.item.value;
141. myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
142. G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
143. setPlace();
144. });
145. function setPlace(){
146. map.clearOverlays();    //清除地图上所有覆盖物
147. function myFun(){
148. var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
149. map.centerAndZoom(pp, 18);
150. map.addOverlay(new BMap.Marker(pp));    //添加标注
151. geoc.getLocation(pp, function(rs){
152. var addComp = rs.addressComponents;
153. data.setValue("curLng",rs.point.lng);
154. data.setValue("curLat",rs.point.lat);
155. data.setValue("province",addComp.province);
156. data.setValue("city",addComp.city);
157. data.setValue("district",addComp.district);
158. data.setValue("street",addComp.street);
159. data.setValue("streetNumber",addComp.streetNumber);
160. data.setValue("business",rs.business);
161. data.setValue("address",rs.address);
162. //G("div403").innerHTML = addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
163. });
164. self.comp("statusData").setValue("editStatus","查看");
165. }
166. var local = new BMap.LocalSearch(map, { //智能搜索
167. onSearchComplete: myFun
168. });
169. local.search(myValue);
170. }
171. }
172. require([ 'http://api.map.baidu.com/api?v=2.0&ak=o9pzum8sF8s3wqodZnt9S5OsKlLdjOil&callback=_baiduInit' ], function() {
173. if (window.BMap && window.BMap.Map) {
174. window._baiduInit();
175. }
176. });
177. };
178. Model.prototype.searchBtnClick = function(event){
179. var data=this.comp("statusData");
180. alert("当前位置经度: "+data.val("curLng")+"\r当前位置维度:"+data.val("curLat")+"\r当前位置省份:"+data.val("province")+"\r当前位置城市:"+data.val("city")+"\r当前位置县区:"+data.val("district")+"\r当前位置镇级街道:"+data.val("street")+"\r当前位置街道号:"+data.val("streetNumber")+"\r当前位置商业机构:"+data.val("business")+"\r当前位置地址:"+data.val("address"));
181. };
182. Model.prototype.div2Click = function(event){
183. this.comp("statusData").setValue("editStatus","编辑");
184. };
185. return Model;
186. });

1. /*顶部titlebar**/
2. .x-titlebar{ }
3. .tb-index.x-titlebar .x-titlebar-title{ padding:10px 0;}
4. .tb-index.x-titlebar .form-group input{ font-size:16px; background-color:#ff4400; border-top:0; border-left:0; border-right:0;}
5. .tb-index.x-titlebar .form-group input:focus{ box-shadow:none;}
6. .btn-group{ border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7;}
7. .btn-group .btn{ border-left:1px solid #e7e7e7;}
8. .text-black{ color:#555;}
9. .text-white{ color:#fff;}
10. .x-list li{ padding:10px; border-bottom:1px solid #e7e7e7;}
11. .x-list li i{ margin-top:10px;} */
12. .tb-clearBtn.btn-default{ border-color:#ff4400; background-color:#fff; color:#ff4400; padding:4px 20px;}
13. .tb-title{ padding:10px; border-bottom:1px solid #e7e7e7;}

原文链接：http://bbs.wex5.com/thread-93596-1-1.html