首页 1 2 3 4 5 6 7

利用WeX5集成百度地图

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

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

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

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

只需要把对应的代码片段复制到WeX5工具（开源免费的一个html5开发工具）中相应的.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;"/>
</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)+' 米。'); //获取两点距离,保留小数点后两位
//在地图上添加折线
//设置地图显示范围，如果用户在平移地图超过设置区域，会弹回设置区域
//右上角，添加默认缩放平移控件
// 添加定位控件
//添加城市列表
//在地图两点上生成一条路线规划
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;
});

.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

版权声明：本文为CSDN博主「weixin_34211761」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_34211761/article/details/92037789

淘先锋技术网

利用WeX5集成百度地图

iOS集成百度地图方法步骤

集成百度地图API实现定位

iOS集成百度地图方法步骤