ITPub博客

首页 > IT职业 > IT图书 > 利用WeX5集成百度地图

利用WeX5集成百度地图

IT图书 作者:castlight 时间:2021-09-09 10:01:15 0 删除 编辑

最近做一个地图类的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)+' 米。');  //获取两点距离,保留小数点后两位

                 

                 

                        //在地图上添加折线

                

         

                

                                         

                                                 

                

                         

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

                         

 

 

 

                

                         

                         

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

                        

                                 

                         //   添加定位控件

                

                                 

                                 

                                //添加城市列表

                        

 

 

                        

                                 

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

                        

                           

 

                        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

                        });

                 

                 

                

                 

                        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

.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

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/1470/viewspace-2815270/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-04-15

  • 博文量
    102
  • 访问量
    1240