利用WeX5集成百度地图

最近做一个地图类的app

经过几天的摸索，终于完成百度地图集成的界面

先看效果：

1、加载完成之后，页面加载制定位置的地图



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



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



4、当用户点击地图其他位置时，标识点移动到对应位置，标题栏的位置信息相应改变

5、当用户点击确认按钮时，用alert将当前标识点的地理信息alert出来



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

<?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;"
    onLoad="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>  
  <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"/>  
  <div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"
    xid="panel1"> 
    <div class="x-panel-top" xid="top1"> 
      <div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar tb-index"
        xid="titleBar1"> 
        <div class="x-titlebar-left" xid="div1"> 
          <a component="$UI/system/components/justep/button/button" class="btn btn-link btn-only-icon"
            label="搜索" xid="button6" icon="icon-chevron-left" onClick="{operation:'window.close'}"> 
            <i xid="i6" class="icon-chevron-left"/>  
            <span xid="span6">搜索</span> 
          </a> 
        </div>  
        <div class="x-titlebar-title" xid="div2" bind-click="div2Click"> 
          <div class="form-group has-feedback" xid="formGroup1"> 
            <div xid="div403" style="display:none;" bind-visible=" $model.statusData.val("editStatus")  !='编辑'" bind-text=' $model.statusData.val("address")'>
              
            </div>  
            <input component="$UI/system/components/justep/input/input" class="form-control input-sm text-white"
                id="suggestId" placeHolder="输入搜索" bind-visible=" $model.statusData.val("editStatus")=='编辑'"/>
              <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"/>
            <!-- <i class="icon-ios7-search-strong form-control-feedback" xid="iSearch"/>  --> 
          </div> 
        </div>  
        <div class="x-titlebar-right reverse" xid="div3"> 
          <a component="$UI/system/components/justep/button/button" class="btn x-yellow btn-only-label more"
            label="确定" xid="searchBtn" onClick="searchBtnClick" bind-enable=' $model.statusData.val("curLng")'> 
            <i xid="i11"/>  
            <span xid="span10">确定</span> 
          </a> 
        </div> 
      </div> 
    </div>  
    <div xid="baiduMap" class="x-panel-content"/> 
  </div> 
</div>

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

/*顶部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://bbs.wex5.com/thread-93596-1-1.html