WeX5集成百度地图详解

最新推荐文章于 2024-04-29 20:53:53 发布

学习白痴

最新推荐文章于 2024-04-29 20:53:53 发布

阅读量277

点赞数

文章标签： sql 开发语言 es6

本文链接：https://blog.csdn.net/weixin_37981475/article/details/121413950

版权

源码部分

<?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>
<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>
  <data xid="default1">[{&quot;editStatus&quot;:&quot;编辑&quot;}]</data></div>
</div>

<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="标题栏" bind-click="标题栏_被点击">
<div class="form-group has-feedback" xid="formGroup1">
<div xid="div403" style="display:none;height:100%;" bind-visible=" $model.statusData.val(&quot;editStatus&quot;)  !='编辑'" bind-text=' $model.statusData.val("address")'>
</div>
<input component="$UI/system/components/justep/input/input" class="form-control input-sm text-white"
id="搜索框" placeHolder="输入搜索" bind-visible=" $model.statusData.val(&quot;editStatus&quot;)=='编辑'" />
<!-- <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="位置信息" onClick="位置信息_被点击" bind-enable=' $model.statusData.val("curLng")'>
<i xid="i11"/>
<span xid="span10">位置信息</span>
</a>
</div>
</div>
</div>
<div xid="百度地图" class="x-panel-content"/>
</div>
</div>

JS部份

define(function(require){
	var $ = require("jquery");
	var justep = require("$UI/system/lib/justep");

	var Model = function(){
		this.callParent();
	};
//以上原生---------------------------------------
Model.prototype.modelLoad = function(event){
var id = this.getIDByXID("百度地图");
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("苏州",13);                                                                        //以城市名称为参数设置地图
//map.centerAndZoom(new BMap.Point(120.592358,31.304024), 13);        //以坐标点为中心设置地图
map.addControl(new BMap.MapTypeControl());                                                //添加地图显示类型控件（地图，卫星图，和3D模型显示）
//map.disableDragging();                                                                                 //设置地图禁止拖动
map.enableScrollWheelZoom(true);                                                                 //设置允许鼠标滚轮缩放地图
map.enableContinuousZoom();                                                                                //设置连续缩放

//设置地图显示范围，如果用户在平移地图超过设置区域，会弹回设置区域
/*        var b = new BMap.Bounds(new BMap.Point(120.592358,33.304034),new BMap.Point(120.592358,31.304014));
try {
BMapLib.AreaRestriction.setBounds(map, b);
} catch (e) {
alert(e);
}
*/

//在地图两点上生成一条路线规划
var myP1 = new BMap.Point(120.592358,31.304024);    //起点
var myP2 = new BMap.Point(120.592358,32.304094);    //终点
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;
/*editStatus编辑状态
curLng当前维度
curLat当前经度
province省份
city城市
district县区
street镇级街道
streetNumber街道号
business商业名称
address地址*/
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" : "搜索框",
                                "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("搜索框").innerHTML = str;//这个地方的搜索框组件随便拿页面上有id的替代都可以主要是响应
});*/
/*var myValue;
ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
G("搜索框").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;//这个地方的搜索框组件随便拿页面上有id的替代都可以主要是响应
setPlace();
});*/


                        ac.addEventListener("onconfirm",function(e) {    //鼠标点击下拉列表后的事件
                        var _value = e.item.value;
                                myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
                                G("搜索框").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;//这个地方的搜索框组件随便拿页面上有id的替代都可以主要是响应
                                
                                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=D5e69d3f5b3f62578609598503953712&callback=_baiduInit' ], function() {
if (window.BMap && window.BMap.Map) {
window._baiduInit();
}
});

};
//组件被点击----------------------------------------------------------------
Model.prototype.位置信息_被点击 = 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.标题栏_被点击 = function(event){
this.comp("statusData").setValue("editStatus","编辑");
};

//以下原生------------------------------------------------------------------

return Model;
});

组件布局
在这里插入图片描述
百度地图指令


statusData地图数据----数据库名称

editStatus编辑状态
curLng当前维度
curLat当前经度
province省份
city城市
district县区
street镇级街道
streetNumber街道号
business商业名称
address地址


//指令说明-----------------------------------------------
var id = this.getIDByXID("百度地图");
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("苏州",13);                                                                        //以城市名称为参数设置地图
map.centerAndZoom(new BMap.Point(120.592358,31.304024), 13);        //以坐标点为中心设置地图
//map.centerAndZoom(new BMapGL.Point(120.592358,31.304024), 13);//初始化地图,设置中心点坐标和地图级别
//map.addControl(new BMap.MapTypeControl());                                                //添加地图显示类型控件（地图，卫星图，和3D模型显示）
//map.disableDragging();                                                                                 //设置地图禁止拖动
map.enableScrollWheelZoom(true);                                                                 //设置允许鼠标滚轮缩放地图
map.enableContinuousZoom();                                                                                //设置连续缩放
//----------------------
var 坐标A = new BMap.Point(120.592358,31.304014);                          // 创建点坐标A
var 坐标B = new BMap.Point(120.592358,32.304094);                          // 创建点坐标B
var 坐标C = new BMap.Point(120.592358,33.304034);                          // 创建点坐标C
//----------------------
alert('从A点到B点的距离是：'+(map.getDistance(坐标A,坐标B)+map.getDistance(坐标B,坐标C)).toFixed(2)/1000 +' 公里。');  //获取三点距离,保留小数点后两位
//----------------------
//在地图上添加折线
var polyline = new BMap.Polyline([坐标A,坐标B,坐标C], {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);

setTimeout(function(){
map.panTo(alert("两秒后执行"));                           //两秒后移动到广州
}, 2000);
//----------------------
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);
});
//----------------------