文档章节

利用WeX5集成百度地图

没错就是酱紫
 没错就是酱紫
发布于 2016/05/27 10:21
字数 1788
阅读 67
收藏 0

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

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

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

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


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

 

 

  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;"
  4.   xid="window" class="window">  
  5.   <div component="$UI/system/components/justep/model/model" xid="model" style="left:18px;top:83px;height:244px;"
  6.     onLoad="modelLoad">
  7.     <div component="$UI/system/components/justep/data/data" autoLoad="true"
  8.       xid="statusData" autoNew="false" idColumn="editStatus">
  9.       <column label="编辑状态" name="editStatus" type="String" xid="xid1"></column>
  10.   <data xid="default1">[{&quot;editStatus&quot;:&quot;编辑&quot;}]</data>
  11.   <column label="当前维度" name="curLng" type="String" xid="xid2"></column>
  12.   <column label="当前经度" name="curLat" type="String" xid="xid3"></column>
  13.   <column label="省份" name="province" type="String" xid="xid4"></column>
  14.   <column label="城市" name="city" type="String" xid="xid5"></column>
  15.   <column label="县区" name="district" type="String" xid="xid6"></column>
  16.   <column label="镇级街道" name="street" type="String" xid="xid7"></column>
  17.   <column label="街道号" name="streetNumber" type="String" xid="xid8"></column>
  18.   <column label="商业名称" name="business" type="String" xid="xid9"></column>
  19.   <column label="地址" name="address" type="String" xid="xid10"></column></div>
  20.   </div>  
  21.   <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"/>  
  22.   <div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"
  23.     xid="panel1"> 
  24.     <div class="x-panel-top" xid="top1"> 
  25.       <div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar tb-index"
  26.         xid="titleBar1"> 
  27.         <div class="x-titlebar-left" xid="div1"> 
  28.           <a component="$UI/system/components/justep/button/button" class="btn btn-link btn-only-icon"
  29.             label="搜索" xid="button6" icon="icon-chevron-left" onClick="{operation:'window.close'}"> 
  30.             <i xid="i6" class="icon-chevron-left"/>  
  31.             <span xid="span6">搜索</span> 
  32.           </a> 
  33.         </div>  
  34.         <div class="x-titlebar-title" xid="div2" bind-click="div2Click"> 
  35.           <div class="form-group has-feedback" xid="formGroup1"> 
  36.             <div xid="div403" style="display:none;" bind-visible=" $model.statusData.val(&quot;editStatus&quot;)  !='编辑'" bind-text=' $model.statusData.val("address")'>
  37.               
  38.             </div>  
  39.             <input component="$UI/system/components/justep/input/input" class="form-control input-sm text-white"
  40.                 id="suggestId" placeHolder="输入搜索" bind-visible=" $model.statusData.val(&quot;editStatus&quot;)=='编辑'"/>
  41.               <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"/>
  42.             <!-- <i class="icon-ios7-search-strong form-control-feedback" xid="iSearch"/>  --> 
  43.           </div> 
  44.         </div>  
  45.         <div class="x-titlebar-right reverse" xid="div3"> 
  46.           <a component="$UI/system/components/justep/button/button" class="btn x-yellow btn-only-label more"
  47.             label="确定" xid="searchBtn" onClick="searchBtnClick" bind-enable=' $model.statusData.val("curLng")'> 
  48.             <i xid="i11"/>  
  49.             <span xid="span10">确定</span> 
  50.           </a> 
  51.         </div> 
  52.       </div> 
  53.     </div>  
  54.     <div xid="baiduMap" class="x-panel-content"/> 
  55.   </div> 
  56. </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.  
  9.  
  10.         Model.prototype.modelLoad = function(event){
  11.                 
  12.                 var id = this.getIDByXID("baiduMap");
  13.                 var self = this;
  14.                 var data=this.comp("statusData");
  15.                 window._baiduInit = function() {
  16.                          map = new BMap.Map(id,{minZoom:2,enableMapClick:false});                //创建地图对象,可以设置地图缩放最大最小级别,设置是否显示POI点击
  17.                         var geoc = new BMap.Geocoder();   
  18.                         
  19.                         //map.centerAndZoom("长春",11);                                                                        //以城市名称为参数设置地图
  20.                         map.centerAndZoom(new BMap.Point(125.276579, 43.852057), 13);        //以坐标点为中心设置地图
  21.                         //map.addControl(new BMap.MapTypeControl());                                                //添加地图显示类型控件(地图,卫星图,和3D模型显示)
  22.                         //map.disableDragging();                                                                                 //设置地图禁止拖动
  23.                         
  24.                         map.enableScrollWheelZoom(true);                                                                 //设置允许鼠标滚轮缩放地图
  25.                         map.enableContinuousZoom();                                                                                //设置连续缩放
  26.                         
  27.                         
  28.                         var pointA = new BMap.Point(125.310364,43.873797);                          // 创建点坐标A
  29.                         var pointB = new BMap.Point(125.367928,43.857159);                          // 创建点坐标B
  30.                         var pointC = new BMap.Point(125.319132,43.830163);                                 // 创建坐标C
  31.                         
  32.                         //alert('从A点到B点的距离是:'+(map.getDistance(pointA,pointB)).toFixed(2)+' 米。');  //获取两点距离,保留小数点后两位
  33.                 
  34.                 
  35.                         //在地图上添加折线
  36.                 /*        var polyline = new BMap.Polyline([pointA,pointB,pointC], {strokeColor:"red", strokeWeight:4, strokeOpacity:0.5});  //定义折线
  37.                         map.addOverlay(polyline);                                                                             //添加折线到地图上
  38.                         */
  39.         
  40.                 /*        var bs = map.getBounds();                                                                           //获取可视区域
  41.                         var bssw = bs.getSouthWest();                                                                           //拿到可视区域左下角
  42.                         var bsne = bs.getNorthEast();                                                                   //拿到可视区域右上角
  43.                         alert("当前地图可视范围是:" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat);
  44.                 */
  45.                                         
  46.                                                 
  47.                 /*        setTimeout(function(){
  48.                                 map.panTo(new BMap.Point(113.262232,23.154345));                           //两秒后移动到广州
  49.                         }, 2000);
  50.                                 */
  51.                         
  52.                         //设置地图显示范围,如果用户在平移地图超过设置区域,会弹回设置区域
  53.                 /*        var b = new BMap.Bounds(new BMap.Point(125.147942, 43.964754),new BMap.Point(125.550382, 43.806325));
  54.                         try {        
  55.                                 BMapLib.AreaRestriction.setBounds(map, b);
  56.                         } catch (e) {
  57.                                 alert(e);
  58.                         }
  59.                         */        
  60.  
  61.  
  62.  
  63.                 /*        var bottom_right_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});// 右下角,添加比例尺
  64.                         map.addControl(bottom_right_control);
  65.                         */
  66.                         
  67.                         
  68.                         //右上角,添加默认缩放平移控件
  69.                         /*var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); 
  70.                         //BMAP_NAVIGATION_CONTROL_SMALL:仅包含平移和缩放按钮;BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮;BMAP_NAVIGATION_CONTROL_ZOOM:仅包含缩放按钮
  71.                         map.addControl(top_right_navigation); 
  72.                         */
  73.                                 
  74.                          // 添加定位控件
  75.                 /*                 var geolocationControl = new BMap.GeolocationControl();
  76.                           geolocationControl.addEventListener("locationSuccess", function(e){
  77.                                     // 定位成功事件
  78.                                     var address = '';
  79.                                     address += e.addressComponent.province;
  80.                                     address += e.addressComponent.city;
  81.                                     address += e.addressComponent.district;
  82.                                     address += e.addressComponent.street;
  83.                                     address += e.addressComponent.streetNumber;
  84.                                     self.comp("tittle1").set({"title":address}); 
  85.                           });
  86.                           geolocationControl.addEventListener("locationError",function(e){
  87.                                     // 定位失败事件
  88.                                     alert(e.message);
  89.                           });
  90.                           map.addControl(geolocationControl);
  91.                         */
  92.                                 
  93.                                 
  94.                                 //添加城市列表
  95.                         /*        var size = new BMap.Size(10, 20);                        //定义控件偏移量
  96.                                 map.addControl(new BMap.CityListControl({
  97.                                     anchor: BMAP_ANCHOR_TOP_LEFT,
  98.                                     offset: size,
  99.                                     // 切换城市之间事件
  100.                                      onChangeBefore: function(){
  101.                                         alert('城市切换之前事件');
  102.                                      },
  103.                                     // 切换城市之后事件
  104.                                      onChangeAfter:function(){
  105.                                        alert('城市切换之后事件');
  106.                                      }
  107.                                 }));
  108.                                 */
  109.  
  110.  
  111.                         /*        map.addEventListener("click",function(e){                        //增加鼠标点击事件
  112.                                         //alert(e.point.lng + "," + e.point.lat);
  113.                                 });
  114.                                 */
  115.                                 
  116.                                 //在地图两点上生成一条路线规划
  117.                         /*        var myP1 = new BMap.Point(125.283837,43.815675);    //起点
  118.                                 var myP2 = new BMap.Point(125.352396,43.869804);    //终点
  119.                                   var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例
  120.                                   driving2.search(myP1, myP2);    //显示一条公交线路
  121.                           */
  122.                           
  123.  
  124.                         map.addEventListener("click",function(e){                        //增加鼠标点击事件
  125.                                 map.clearOverlays(); 
  126.                                 map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat)));           //增加点
  127.                                 
  128.                                 geoc.getLocation(e.point, function(rs){
  129.                                         var addComp = rs.addressComponents;
  130.                                         
  131.                                                 data.setValue("curLng",rs.point.lng);
  132.                                                 data.setValue("curLat",rs.point.lat);
  133.                                                 data.setValue("province",addComp.province);
  134.                                                 data.setValue("city",addComp.city);
  135.                                                 
  136.                                                 data.setValue("district",addComp.district);
  137.                                                 data.setValue("street",addComp.street);
  138.                                                 data.setValue("streetNumber",addComp.streetNumber);
  139.                                                 data.setValue("business",rs.business);
  140.                                                 data.setValue("address",rs.address);
  141.                                         //G("div403").innerHTML = addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
  142.                                         
  143.                                         self.comp("statusData").setValue("editStatus","查看");
  144.                                 });
  145.                                 
  146.                         });
  147.                                 
  148.                         function G(id) {
  149.                                 return document.getElementById(id);
  150.                         }
  151.  
  152.                         var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
  153.                                 {"input" : "suggestId",
  154.                                 "location" : map
  155.                         });
  156.                 
  157.                 
  158.                 /*        ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
  159.                         var str = "";
  160.                                 var _value = e.fromitem.value;
  161.                                 var value = "";
  162.                                 if (e.fromitem.index > -1) {
  163.                                         value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
  164.                                 }    
  165.                                 str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
  166.                                 
  167.                                 value = "";
  168.                                 if (e.toitem.index > -1) {
  169.                                         _value = e.toitem.value;
  170.                                         value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
  171.                                 }    
  172.                                 str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
  173.                                 G("searchResultPanel").innerHTML = str;
  174.                         });*/
  175.                 
  176.                         var myValue;
  177.                         ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
  178.                         var _value = e.item.value;
  179.                                 myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
  180.                                 G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
  181.                                 
  182.                                 setPlace();
  183.                                 
  184.                         });
  185.                 
  186.                         function setPlace(){
  187.                                 map.clearOverlays();    //清除地图上所有覆盖物
  188.                                 function myFun(){
  189.                                         var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
  190.                                         map.centerAndZoom(pp, 18);
  191.                                         map.addOverlay(new BMap.Marker(pp));    //添加标注
  192.                                         
  193.                                         geoc.getLocation(pp, function(rs){
  194.                                                 var addComp = rs.addressComponents;
  195.                         
  196.                                                 data.setValue("curLng",rs.point.lng);
  197.                                                 data.setValue("curLat",rs.point.lat);
  198.                                                 data.setValue("province",addComp.province);
  199.                                                 data.setValue("city",addComp.city);
  200.                                                 data.setValue("district",addComp.district);
  201.                                                 data.setValue("street",addComp.street);
  202.                                                 data.setValue("streetNumber",addComp.streetNumber);
  203.                                                 data.setValue("business",rs.business);
  204.                                                 data.setValue("address",rs.address);
  205.                                                 
  206.                                                 //G("div403").innerHTML = addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
  207.                                         });
  208.                                         self.comp("statusData").setValue("editStatus","查看");
  209.                                 }
  210.                                 
  211.                                 var local = new BMap.LocalSearch(map, { //智能搜索
  212.                                   onSearchComplete: myFun
  213.                                 });
  214.                                 local.search(myValue);
  215.                                  
  216.                                 }
  217.                                 
  218.                         }
  219.                         require([ 'http://api.map.baidu.com/api?v=2.0&ak=o9pzum8sF8s3wqodZnt9S5OsKlLdjOil&callback=_baiduInit' ], function() {
  220.                                 if (window.BMap && window.BMap.Map) {
  221.                                         window._baiduInit();        
  222.                                 }
  223.                         });
  224.         };
  225.  
  226.         Model.prototype.searchBtnClick = function(event){
  227.                 var data=this.comp("statusData");
  228.                 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"));
  229.         };
  230.  
  231.         
  232.  
  233.         Model.prototype.div2Click = function(event){
  234.                 this.comp("statusData").setValue("editStatus","编辑");
  235.         };
  236.  
  237.         
  238.  
  239.         return Model;
  240. });

 

 

 

  1. /*顶部titlebar**/
  2. .x-titlebar{ background-color:#ff4400;}
  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.  
  7. .btn-group{ border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7;}
  8. .btn-group .btn{ border-left:1px solid #e7e7e7;}
  9.  
  10. .text-black{ color:#555;}
  11. .text-white{ color:#fff;}
  12.  
  13. .x-list li{ padding:10px; border-bottom:1px solid #e7e7e7;}
  14. .x-list li i{ margin-top:10px;} */
  15.  
  16. .tb-clearBtn.btn-default{ border-color:#ff4400; background-color:#fff; color:#ff4400; padding:4px 20px;}
  17. .tb-title{ padding:10px; border-bottom:1px solid #e7e7e7;}

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

© 著作权归作者所有

没错就是酱紫
粉丝 6
博文 16
码字总数 33938
作品 0
东城
程序员
私信 提问
WeX5 快速开发平台 V3.4 正式版发布

WeX5 V3.4 正式版下载地址 http://pan.baidu.com/s/1jHBUDtc WeX5 V3.4正式版发布说明: 1、新增移动端模板32个:包括首页、数据列表、数据展示、注册、登录、搜索等常用单页面模板和完整应用...

muyu
2016/04/01
5.8K
17
WeX5 V3.1.1 正式版发布,跨端移动开发框架

WeX5 V3.1.1 正式版发布,更新内容如下: 2015-5-15 V3.1.1 基于V3.1正式版(4月17日)修改如下问题 1. 动态生成的contents中的content手机端运行的时候手滑动改变content页active的索引值不会...

muyu
2015/05/18
3.5K
2
WeX5 快速开发平台 V3.6 正式版发布

WeX5 V3.6 正式版核心特性: 一、打包特性增强: 1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换,使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸; 2- A...

muyu
2016/10/14
5.9K
4
WeX5 快速开发平台V3.6预览版发布(2016-9-1)

WeX5 V3.6 预览版核心特性: 一、打包特性增强: 1- 提供多WebView选择,引入腾讯X5引擎,可自动适配移动设备环境进行切换,使通过X5打包生成的App具备更高的兼容性及更小的文件尺寸; 2- A...

muyu
2016/09/04
4.7K
10
WeX5 V3.3 正式版,跨端移动开发框架

WeX5 V3.3 正式版发布了,新增特性: 1、提供超轻量高性能服务框架(XBaaS),支持免代码或少量代码快速开发操作数据表的CRUD服务,目前v3.3版本提供了XBaaS的java和.net语言实现,后续会提供...

muyu
2016/01/19
3.5K
10

没有更多内容

加载失败,请刷新页面

加载更多

How to find table in a database with HeidiSQL

In this article I want to show you how you can find table by name with HeidiSQL. Find table by typing One of the options to find table is to having focus in the object explorer ......

Ciet
6分钟前
2
0
基于SWIG跨平台开发的C++编码规范

1、数组定义 使用数组不建议采用指针方式eg double *,或者 double test[4] 直接采用std::vector或list即可。对于固定长度的数组定义为一个结构体 double test[4]instead ofstruct Vec...

洋碱
8分钟前
2
0
用Markdown编程之布局

基本就是用Markdown的布局方式。 \:是转义符号,最高优先级。 行首+# :用于空间布局,1-6分别标明:模式根、子模式、子模式内。 行首+> :用于标注和通信,1个标明标注,2个标明分类,3个标...

dwcz
15分钟前
3
0
SpringBoot定时器多线程解决方案

@Scheduled 作用:spring定时器(定时执行一次或定时轮询执行一段代码) 使用场景:注解在方法上 参数说明:常用参数 @Scheduled 参数说明 String cron:cron表达式定义了方法执行的时间规则(网...

whoisliang
15分钟前
4
0
3.01、Spring AOP的理解

注:转 https://mp.weixin.qq.com/s/PsgTLn8cdTxdd542XgVkUA 什么是AOP AOP(Aspect-Oriented Programming), 即 面向切面编程 , 它与 OOP( Object-Oriented Programming, 面向对象编程) 相辅相......

追忆2025
21分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部