手记
下载APP

利用WeX5集成百度地图

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

 2、顶部能够输入地图的关键字,地图显示符合条件的下拉列表
3、用户选择了相应的选项后,地图会移动到对应的地图范围,同时标题栏显示对应位置信息
4、当用户点击地图其他位置时,标识点移动到对应位置,标题栏的位置信息相应改变
5、当用户点击确认按钮时,用alert将当前标识点的地理信息alert出来


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

[代码]xml代码:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

<!--?xml version="1.0"   encoding="utf-8"?-->

 

<div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;" xid="window" class="window"> 

  <div component="$UI/system/components/justep/model/model" xid="model" style="left:18px;top:83px;height:244px;" ="modelLoad">

    <div component="$UI/system/components/justep/data/data" autoload="true" xid="statusData" autonew="false" idcolumn="editStatus">

      <column label="编辑状态" name="editStatus" type="String" xid="xid1"></column>

  <data xid="default1">[{"editStatus":"编辑"}]</data>

  <column label="当前维度" name="curLng" type="String" xid="xid2"></column>

  <column label="当前经度" name="curLat" type="String" xid="xid3"></column>

  <column label="省份" name="province" type="String" xid="xid4"></column>

  <column label="城市" name="city" type="String" xid="xid5"></column>

  <column label="县区" name="district" type="String" xid="xid6"></column>

  <column label="镇级街道" name="street" type="String" xid="xid7"></column>

  <column label="街道号" name="streetNumber" type="String" xid="xid8"></column>

  <column label="商业名称" name="business" type="String" xid="xid9"></column>

  <column label="地址" name="address" type="String" xid="xid10"></column></div>

  </div> 

  </div>

 

[代码]java代码:

?

001

002

003

004

005

006

007

008

009

010

011

012

013

014

015

016

017

018

019

020

021

022

023

024

025

026

027

028

029

030

031

032

033

034

035

036

037

038

039

040

041

042

043

044

045

046

047

048

049

050

051

052

053

054

055

056

057

058

059

060

061

062

063

064

065

066

067

068

069

070

071

072

073

074

075

076

077

078

079

080

081

082

083

084

085

086

087

088

089

090

091

092

093

094

095

096

097

098

099

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

define(function(require){

        var   $ = require("jquery");

        var   justep = require("$UI/system/lib/justep");

        var   map;

        var   Model = function(){

                this.callParent();

        };

 

 

        Model.prototype.modelLoad   = function(event){

                 

                var   id = this.getIDByXID("baiduMap");

                var   self = this;

                var   data=this.comp("statusData");

                window._baiduInit   = function() {

                         map   = new BMap.Map(id,{minZoom:2,enableMapClick:false});                  //创建地图对象,可以设置地图缩放最大最小级别,设置是否显示POI点击

                        var   geoc = new BMap.Geocoder();    

                         

                        //map.centerAndZoom("长春",11);                                                                          //以城市名称为参数设置地图

                        map.centerAndZoom(new BMap.Point(125.276579, 43.852057), 13);          //以坐标点为中心设置地图

                        //map.addControl(new   BMap.MapTypeControl());                                                  //添加地图显示类型控件(地图,卫星图,和3D模型显示)

                        //map.disableDragging();                                                                                   //设置地图禁止拖动

                         

                        map.enableScrollWheelZoom(true);                                                                   //设置允许鼠标滚轮缩放地图

                        map.enableContinuousZoom();                                                                                  //设置连续缩放

                         

                         

                        var   pointA = new BMap.Point(125.310364,43.873797);                            // 创建点坐标A

                        var   pointB = new BMap.Point(125.367928,43.857159);                            // 创建点坐标B

                        var   pointC = new BMap.Point(125.319132,43.830163);                                   // 创建坐标C

                         

                        //alert('从A点到B点的距离是:'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位

                 

                 

                        //在地图上添加折线

                /*          var polyline = new BMap.Polyline([pointA,pointB,pointC],   {strokeColor:"red", strokeWeight:4, strokeOpacity:0.5});  //定义折线

                        map.addOverlay(polyline);                                                                               //添加折线到地图上

                        */

         

                /*          var bs =   map.getBounds();                                                                             //获取可视区域

                        var   bssw =   bs.getSouthWest();                                                                             //拿到可视区域左下角

                        var   bsne =   bs.getNorthEast();                                                                     //拿到可视区域右上角

                        alert("当前地图可视范围是:" + bssw.lng +   "," + bssw.lat + "到" + bsne.lng +   "," + bsne.lat);

                */

                                         

                                                 

                /*          setTimeout(function(){

                                map.panTo(new   BMap.Point(113.262232,23.154345));                             //两秒后移动到广州

                        },   2000);

                                */

                         

                        //设置地图显示范围,如果用户在平移地图超过设置区域,会弹回设置区域

                /*          var b = new BMap.Bounds(new BMap.Point(125.147942, 43.964754),new   BMap.Point(125.550382, 43.806325));

                        try   {       

                                BMapLib.AreaRestriction.setBounds(map,   b);

                        }   catch (e) {

                                alert(e);

                        }

                        */         

 

 

 

                /*          var bottom_right_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});//   右下角,添加比例尺

                        map.addControl(bottom_right_control);

                        */

                         

                         

                        //右上角,添加默认缩放平移控件

                        /*var   top_right_navigation = new BMap.NavigationControl({anchor:   BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});

                        //BMAP_NAVIGATION_CONTROL_SMALL:仅包含平移和缩放按钮;BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮;BMAP_NAVIGATION_CONTROL_ZOOM:仅包含缩放按钮

                        map.addControl(top_right_navigation);  

                        */

                                 

                         //   添加定位控件

                /*                   var geolocationControl = new BMap.GeolocationControl();

                          geolocationControl.addEventListener("locationSuccess",   function(e){

                                    //   定位成功事件

                                    var   address = '';

                                    address   += e.addressComponent.province;

                                    address   += e.addressComponent.city;

                                    address   += e.addressComponent.district;

                                    address   += e.addressComponent.street;

                                    address   += e.addressComponent.streetNumber;

                                    self.comp("tittle1").set({"title":address});  

                          });

                          geolocationControl.addEventListener("locationError",function(e){

                                    //   定位失败事件

                                    alert(e.message);

                          });

                          map.addControl(geolocationControl);

                        */

                                 

                                 

                                //添加城市列表

                        /*          var size = new BMap.Size(10,   20);                          //定义控件偏移量

                                map.addControl(new   BMap.CityListControl({

                                    anchor:   BMAP_ANCHOR_TOP_LEFT,

                                    offset:   size,

                                    //   切换城市之间事件

                                     onChangeBefore:   function(){

                                        alert('城市切换之前事件');

                                     },

                                    //   切换城市之后事件

                                     onChangeAfter:function(){

                                       alert('城市切换之后事件');

                                     }

                                }));

                                */

 

 

                        /*          map.addEventListener("click",function(e){                          //增加鼠标点击事件

                                        //alert(e.point.lng   + "," + e.point.lat);

                                });

                                */

                                 

                                //在地图两点上生成一条路线规划

                        /*          var myP1 = new BMap.Point(125.283837,43.815675);    //起点

                                var   myP2 = new BMap.Point(125.352396,43.869804);    //终点

                                  var   driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport:   true}});    //驾车实例

                                  driving2.search(myP1,   myP2);    //显示一条公交线路

                          */

                           

 

                        map.addEventListener("click",function(e){                          //增加鼠标点击事件

                                map.clearOverlays();  

                                map.addOverlay(new   BMap.Marker(new BMap.Point(e.point.lng,   e.point.lat)));             //增加点

                                 

                                geoc.getLocation(e.point,   function(rs){

                                        var   addComp = rs.addressComponents;

                                         

                                                data.setValue("curLng",rs.point.lng);

                                                data.setValue("curLat",rs.point.lat);

                                                data.setValue("province",addComp.province);

                                                data.setValue("city",addComp.city);

                                                 

                                                data.setValue("district",addComp.district);

                                                data.setValue("street",addComp.street);

                                                data.setValue("streetNumber",addComp.streetNumber);

                                                data.setValue("business",rs.business);

                                                data.setValue("address",rs.address);

                                        //G("div403").innerHTML   = addComp.city + ", " + addComp.district + ", " +   addComp.street + ", " + addComp.streetNumber;

                                         

                                        self.comp("statusData").setValue("editStatus","查看");

                                });

                                 

                        });

                                 

                        function   G(id) {

                                return   document.getElementById(id);

                        }

 

                        var   ac = new BMap.Autocomplete(    //建立一个自动完成的对象

                                {"input"   : "suggestId",

                                "location"   : map

                        });

                 

                 

                /*          ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件

                        var   str = "";

                                var   _value = e.fromitem.value;

                                var   value = "";

                                if   (e.fromitem.index > -1) {

                                        value   = _value.province +  _value.city +  _value.district +    _value.street +  _value.business;

                                }     

                                str   = "FromItem<br>index = " + e.fromitem.index +   "<br>value = " + value;

                                 

                                value   = "";

                                if   (e.toitem.index > -1) {

                                        _value   = e.toitem.value;

                                        value   = _value.province +  _value.city +  _value.district +    _value.street +  _value.business;

                                }     

                                str   += "<br>ToItem<br>index = " + e.toitem.index +   "<br>value = " + value;

                                G("searchResultPanel").innerHTML   = str;

                        });*/

                 

                        var   myValue;

                        ac.addEventListener("onconfirm",   function(e) {    //鼠标点击下拉列表后的事件

                        var   _value = e.item.value;

                                myValue   = _value.province +  _value.city +  _value.district +    _value.street +  _value.business;

                                G("searchResultPanel").innerHTML   ="onconfirm<br>index = " + e.item.index + "<br>myValue = " + myValue;

                                 

                                setPlace();

                                 

                        });

                 

                        function   setPlace(){

                                map.clearOverlays();      //清除地图上所有覆盖物

                                function   myFun(){

                                        var   pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果

                                        map.centerAndZoom(pp,   18);

                                        map.addOverlay(new BMap.Marker(pp));    //添加标注

                                         

                                        geoc.getLocation(pp,   function(rs){

                                                var   addComp = rs.addressComponents;

                         

                                                data.setValue("curLng",rs.point.lng);

                                                data.setValue("curLat",rs.point.lat);

                                                data.setValue("province",addComp.province);

                                                data.setValue("city",addComp.city);

                                                data.setValue("district",addComp.district);

                                                data.setValue("street",addComp.street);

                                                data.setValue("streetNumber",addComp.streetNumber);

                                                data.setValue("business",rs.business);

                                                data.setValue("address",rs.address);

                                                 

                                                //G("div403").innerHTML   = addComp.city + ", " + addComp.district + ", " +   addComp.street + ", " + addComp.streetNumber;

                                        });

                                        self.comp("statusData").setValue("editStatus","查看");

                                }

                                 

                                var   local = new BMap.LocalSearch(map,   { //智能搜索

                                  onSearchComplete:   myFun

                                });

                                local.search(myValue);

                                  

                                }

                                 

                        }

                        require([   'http://api.map.baidu.com/api?v=2.0&ak=o9pzum8sF8s3wqodZnt9S5OsKlLdjOil&callback=_baiduInit' ], function() {

                                if (window.BMap && window.BMap.Map)   {

                                        window._baiduInit();         

                                }

                        });

        };

 

        Model.prototype.searchBtnClick   = function(event){

                var   data=this.comp("statusData");

                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"));

        };

 

         

 

        Model.prototype.div2Click   = function(event){

                this.comp("statusData").setValue("editStatus","编辑");

        };

 

         

 

        return Model;

});

[代码]java代码:

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

/*顶部titlebar**/

.x-titlebar{ background-color:#ff4400;}

.tb-index.x-titlebar .x-titlebar-title{   padding:10px 0;}

.tb-index.x-titlebar .form-group input{   font-size:16px; background-color:#ff4400; border-top:0; border-left:0;   border-right:0;}

.tb-index.x-titlebar .form-group   input:focus{ box-shadow:none;}

 

.btn-group{ border-top:1px solid #e7e7e7;   border-bottom:1px solid #e7e7e7;}

.btn-group .btn{ border-left:1px solid   #e7e7e7;}

 

.text-black{ color:#555;}

.text-white{ color:#fff;}

 

.x-list li{ padding:10px;   border-bottom:1px solid #e7e7e7;}

.x-list li i{ margin-top:10px;} */

 

.tb-clearBtn.btn-default{ border-color:#ff4400;   background-color:#fff; color:#ff4400; padding:4px 20px;}

.tb-title{ padding:10px;   border-bottom:1px solid #e7e7e7;}

原文链接:http://www.apkbus.com/blog-808908-60654.html

打开App,阅读手记
0人推荐
随时随地看视频慕课网APP