首先准备工作,先在百度开发平台申请app的地图key,需要在manifest.json文件配置百度SDK参数
地图主界面代码片段:
<body>
<header id="header" class="mui-bar mui-bar-nav" style="background-color: gold">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
<h1 class="mui-title" style="color: white;">百度地图</h1>
<!--<a class="mui-pull-right mui-icon mui-icon-chat" style="color: white;" onclick="info()"></a>-->
</header>
<div id="map">地图加载中...</div>
</body>
js加载片段
<script>
var ws = null,
wo = null;
var em = null,
map = null,
pcenter = null;
//生成2个对象分别控制主窗口和菜单窗口;
var menu = null,
main = null;
var showMenu = false;
var isInTransition = false;
var servicearr = [];
var bzmarkers = {};
var Lon = 0; //获取经度
var Lat = 0; //获取纬度
var mypoi=null;
//开始预加载菜单页;
mui.plusReady(function() {
if(!em||ws){return};
ws=plus.webview.currentWebview();
wo=ws.opener();
pcenter = new plus.maps.Point(101.770073,36.635897);
setTimeout(function(){
map=new plus.maps.Map("map");
userLocation();
pcenter = new plus.maps.Point(Lon, Lat);
map.centerAndZoom(pcenter, 15);
createSubview();
}, 300);
// 显示页面并关闭等待框
ws.show("pop-in");
});
function getServiceOrg(lng, lat, varsTypeName) {
servicearr = [];
if(lng!=''&&lng!=null){
Lon=lng;
}
if(lat!=''&&lat!=null){
Lat=lat;
}
mui.ajax(httpUrl + 'api/app/oldman/serviceOrgAll', {
type: 'POST', //HTTP请求类型
data: {
lng: Lon, //118.694
lat: Lat, //32.901
serviceRadius: 10000, //搜索范围5公里
serviceProjectName: varsTypeName
},
dataType: 'json', //服务器返回json格式数据
async: false,
timeout: 10000, //超时时间设置为10秒;
success: function(data) {
if(data.success != 1) {
mui.toast(data.message);
} else {
for(var i = 0; i < data.data.length; i++) {
// console.log(data.data);
servicearr.push(data.data[i]);
}
bzmarkers = {
serverOrgs: servicearr
};
setTimeout(function(){
addMarker("serverOrgs");
}, 1000);
}
},
error: function(xhr, type, errorThrown) {
mui.toast("服务器断开连接,请求失败!");
}
});
}
// if(window.plus){
// plusReady();
// }else{
// document.addEventListener("plusready",plusReady,false);
// }
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded", function() {
em = document.getElementById("map");
window.plus && plusReady();
}, false);
function userLocation() {
map.clearOverlays();
// map.showUserLocation(true);
map.getUserLocation(function(state, pos) {
if(0 == state) {
map.setCenter(pos);
Lon = pos.getLng(); //获取经度
Lat = pos.getLat();
getServiceOrg(Lon, Lat, ''); //118.78,32.03,
}
});
}
function createMarker(lonLat, type, mrkInfo) {
var marker = new plus.maps.Marker(lonLat);
if(type == 'user') {
var circleObj=new plus.maps.Circle(new plus.maps.Point(lonLat.getLng(), lonLat.getLat()),10000);//十公里范围内
circleObj.setFillColor( "#E3E3A4" );// 设置圆圈的填充颜色
circleObj.setFillOpacity(0.3);// 设置圆圈填充颜色的透明度
circleObj.setStrokeColor("#8F270D")// 设置圆圈边框的颜色
circleObj.setStrokeOpacity(0.3);// 设置圆圈边框的透明度
circleObj.setLineWidth(1)
map.addOverlay(circleObj);
map.setZoom(13);
marker.setIcon("../img/user/dingwei.png");
var userName = plus.storage.getItem("name");
var bubble = new plus.maps.Bubble(userName);
marker.setBubble(bubble);
} else if(type == 'serverOrgs') {
marker.setIcon("../img/user/point.png");
marker.setLabel(mrkInfo.serviceOrgName);
marker.onclick=function(e){
//组织点位点击事件
var m= plus.webview.getWebviewById("userMainMaker");
plus.webview.close(m);
var wMaker = plus.webview.create('userMainMaker.html', 'userMainMaker', {
bottom: '10px',
width:'98%',
height: '50%',
left:'1%',
position: 'absolute',
scrollIndicator: 'none',
background: 'white'
},{
param:mrkInfo
}
);
ws.append(wMaker);
}
}else if(type =='ylOrgs') {
marker.setIcon('../img/user/username.png');
}
map.setCenter(lonLat);
map.addOverlay(marker);
}
function createSubview() {
var topoffset = '44px';
if(plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 44) + 'px';
}
// var wsub = plus.webview.create('userMainTop.html', 'userMainTop', {
// top: topoffset,
// height: '15%',
// position: 'absolute',
// scrollIndicator: 'none',
// background: 'transparent'
// });
// ws.append(wsub);
var wbottom = plus.webview.create('userMainBottom.html', 'userMainBottom', {
bottom: '10px',
height: '250px',
position: 'absolute',
scrollIndicator: 'none',
background: 'transparent'
});
ws.append(wbottom);
}
function addMarker(type) {
map.clearOverlays();
createMarker(mypoi,'user','');
for(var i = 0; i < bzmarkers[type].length; i++) {
var poi = new plus.maps.Point(bzmarkers[type][i].lng, bzmarkers[type][i].lat);
createMarker(poi, type, bzmarkers[type][i]);
}
}
function resetMap() {
map.reset();
}
function info() {
mui.openWindow({
url : 'userinfo.html',
id : 'userinfo.html'
});
}