之前的地图定位用的是百度地图api
考虑到稳定性,现在改用H5例子里面的地图
修改完成后效果如下:
代码:
maps_map.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<title>Hello H5+</title>
<link href="../css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../css/ditu.css" type="text/css" charset="utf-8" />
<script type="text/javascript" src="../js/ditu.js"></script>
<script type="text/javascript">
var ws = null,
wo = null;
var em = null,
map = null,
pcenter = null;
marker =null;
// H5 plus事件处理
var venuecode;
function plusReady() {
if(!em || ws) {
return
};
// 获取窗口对象
ws = plus.webview.currentWebview();
wo = ws.opener();
venuecode = decodeURIComponent(Common.getParam("venuecode"));
//alert(venuecode);
//var venuecode = '000029';
if(venuecode == '000001'){//博物馆
pcenter = new plus.maps.Point(118.85015, 31.953853);
marker = new plus.maps.Marker(new plus.maps.Point(118.85015, 31.953853));
}else if(venuecode == '000002') {//图书馆
pcenter = new plus.maps.Point(118.849617, 31.961308);
marker = new plus.maps.Marker(new plus.maps.Point(118.849617, 31.961308));
}else if(venuecode == '000003') {//文化馆
pcenter = new plus.maps.Point(118.835544, 31.957474);
marker = new plus.maps.Marker(new plus.maps.Point(118.835544, 31.957474));
}else if(venuecode == '000004') {//群艺馆
pcenter = new plus.maps.Point(118.849097, 31.961739);
marker = new plus.maps.Marker(new plus.maps.Point(118.849097, 31.961739));
}else if(venuecode == '000005') {//民俗馆
pcenter = new plus.maps.Point(118.932923, 31.864317);
marker = new plus.maps.Marker(new plus.maps.Point(118.932923, 31.864317));
}else if(venuecode == '000006') {
pcenter = new plus.maps.Point(118.745176, 31.8929);
marker = new plus.maps.Marker(new plus.maps.Point(118.745176, 31.8929));
}else if(venuecode == '000007') {
pcenter = new plus.maps.Point(118.737944, 31.911652);
marker = new plus.maps.Marker(new plus.maps.Point(118.737944, 31.911652));
}else if(venuecode == 'U00001') {//文广局
pcenter = new plus.maps.Point(118.852653, 31.919978);
marker = new plus.maps.Marker(new plus.maps.Point(118.852653, 31.919978));
}else if(venuecode == '000021') {//东山街道
pcenter = new plus.maps.Point(118.837168,31.958716);
marker = new plus.maps.Marker(new plus.maps.Point(118.837168,31.958716));
}else if(venuecode == '000022') {//秣陵街道
pcenter = new plus.maps.Point(118.845583,31.840972);
marker = new plus.maps.Marker(new plus.maps.Point(118.845583,31.840972));
}else if(venuecode == '000023') {//汤山街道
pcenter = new plus.maps.Point(119.071179,32.060497);
marker = new plus.maps.Marker(new plus.maps.Point(119.071179,32.060497));
}else if(venuecode == '000024') {//淳化街道
pcenter = new plus.maps.Point(118.939573,31.944176);
marker = new plus.maps.Marker(new plus.maps.Point(118.939573,31.944176));
}else if(venuecode == '000025') {//禄口街道
pcenter = new plus.maps.Point(118.871789,31.780406);
marker = new plus.maps.Marker(new plus.maps.Point(118.871789,31.780406));
}else if(venuecode == '000026') {//江宁街道
pcenter = new plus.maps.Point(118.615181,31.869993);
marker = new plus.maps.Marker(new plus.maps.Point(118.615181,31.869993));
}else if(venuecode == '000027') {//谷里街道
pcenter = new plus.maps.Point(118.707758,31.876773);
marker = new plus.maps.Marker(new plus.maps.Point(118.707758,31.876773));
}else if(venuecode == '000028') {//湖熟街道
pcenter = new plus.maps.Point(118.991981,31.865749);
marker = new plus.maps.Marker(new plus.maps.Point(118.991981,31.865749));
}else if(venuecode == '000029') {//横溪街道
pcenter = new plus.maps.Point(118.788581,31.727515);
marker = new plus.maps.Marker(new plus.maps.Point(118.788581,31.727515));
}else if(venuecode == '000030') {//麒麟街道
pcenter = new plus.maps.Point(118.932676,32.057259);
marker = new plus.maps.Marker(new plus.maps.Point(118.932676,32.057259));
}
setTimeout(function() {
map = new plus.maps.Map("map");
map.centerAndZoom(pcenter, 14);
createMarker();
// 创建子窗口
//createSubview();
}, 300);
// 显示页面并关闭等待框
ws.show("pop-in");
}
if(window.plus) {
plusReady();
} else {
document.addEventListener("plusready", plusReady, false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded", function() {
em = document.getElementById("map");
window.plus && plusReady();
}, false);
function createMarker() {
//高德地图坐标为(116.3406445236,39.9630878208), 百度地图坐标为(116.347292,39.968716
//var marker = new plus.maps.Marker(new plus.maps.Point(118.788581,31.727515));
marker.setIcon("../image/marker_red_sprite.png");
//marker.setLabel("HBuilder");
//var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
//marker.setBubble(bubble);
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('maps_map_sub.html', 'sub', {
top: topoffset,
height: '60px',
position: 'absolute',
scrollIndicator: 'none',
background: 'transparent'
});
ws.append(wsub);
}*/
function userLocation() {
//定位
var longt;
var lat;
function geoInf(position) {
var codns = position.coords; //获取地理坐标信息;
lat = codns.latitude; //获取到当前位置的纬度;
longt = codns.longitude; //获取到当前位置的经度
//console.log(JSON.stringify(position));
}
if(plus.os.name !== 'Android') {
plus.geolocation.getCurrentPosition(geoInf, function(e) {
alert("获取位置信息失败:" + e.message);
}, {
geocode: false
});
var url = "";
var btnArray = ['否', '是'];
mui.confirm('是否需要调用?', '第三方地图程序导航', btnArray, function(e) {
if(e.index == 1) {
if('Android' === plus.os.name && navigator.userAgent.indexOf('StreamApp') > 0) {
plus.nativeUI.toast('当前环境暂不支持地图插件');
return;
}
var dst;
var src = new plus.maps.Point(longt, lat); // 当前位置
// 设置目标位置坐标点和其实位置坐标点
if(venuecode == '000001') {
dst = new plus.maps.Point(118.844039, 31.948502); //118.850465,31.95386
//dst = new plus.maps.Point(118.838615, 31.95058);
// 调用系统地图显示
plus.maps.openSysMap(dst, "江宁区博物馆", src);
} else if(venuecode == '000002') {
dst = new plus.maps.Point(118.843416, 31.955579); //118.84976,31.961218
//dst = new plus.maps.Point(118.83791, 31.957938);
plus.maps.openSysMap(dst, "江宁区图书馆", src);
} else if(venuecode == '000003') {
dst = new plus.maps.Point(118.82875, 31.951451); //118.835544,31.957474
//dst = new plus.maps.Point(118.823694, 31.954194);
plus.maps.openSysMap(dst, "江宁区文化馆", src);
} else if(venuecode == '000004') {
dst = new plus.maps.Point(118.84254, 31.955886); //118.849097,31.961739
//dst = new plus.maps.Point(118.837247, 31.958459);
plus.maps.openSysMap(dst, "江宁区群艺馆", src);
} else if(venuecode == '000005') {
dst = new plus.maps.Point(118.926409, 31.857916); //118.932923,31.864317
//dst = new plus.maps.Point(118.921073, 31.861037);
plus.maps.openSysMap(dst, "江宁区民俗馆", src);
} else if(venuecode == '000006') {
dst = new plus.maps.Point(118.738544, 31.887185);
plus.maps.openSysMap(dst, "南唐二陵文物保护管理所", src);
} else if(venuecode == '000007') {
dst = new plus.maps.Point(118.731362, 31.905969);
plus.maps.openSysMap(dst, "郑和墓", src);
} else if(venuecode == 'U00001') {
dst = new plus.maps.Point(118.845796, 31.914046); //118.852183,31.919835
//plus.maps.openSysMap(dst, "江宁文广局", src);
//dst = new plus.maps.Point(118.840333,31.91655);
plus.maps.openSysMap(dst, "江宁文广局", src);
} else if(venuecode == '000021') {
dst = new plus.maps.Point(118.830738, 31.953223);
plus.maps.openSysMap(dst, "东山街道", src);
} else if(venuecode == '000022') {
dst = new plus.maps.Point(118.839008, 31.8349);
plus.maps.openSysMap(dst, "秣陵街道", src);
} else if(venuecode == '000023') {
dst = new plus.maps.Point(119.058863, 32.057452);
plus.maps.openSysMap(dst, "汤山街道", src);
} else if(venuecode == '000024') {
dst = new plus.maps.Point(118.935281, 31.937571);
plus.maps.openSysMap(dst, "淳化街道", src);
} else if(venuecode == '000025') {
dst = new plus.maps.Point(118.865185, 31.774661);
plus.maps.openSysMap(dst, "禄口街道", src);
} else if(venuecode == '000026') {
dst = new plus.maps.Point(118.608524, 31.864293);
plus.maps.openSysMap(dst, "江宁街道", src);
} else if(venuecode == '000027') {
dst = new plus.maps.Point(118.701323, 31.870489);
plus.maps.openSysMap(dst, "谷里街道", src);
} else if(venuecode == '000028') {
dst = new plus.maps.Point(118.985413, 31.860136);
plus.maps.openSysMap(dst, "湖熟街道", src);
} else if(venuecode == '000029') {
dst = new plus.maps.Point(118.782258, 31.720667);
plus.maps.openSysMap(dst, "横溪街道", src);
} else if(venuecode == '000030') {
dst = new plus.maps.Point(118.926396, 32.050926);
plus.maps.openSysMap(dst, "麒麟街道", src);
}
}
});
}else{
plus.geolocation.getCurrentPosition(geoInf, function(e) {
alert("获取位置信息失败:" + e.message);
}, {
geocode: false
});
var url = "";
var btnArray = ['否', '是'];
mui.confirm('是否需要调用?', '第三方地图程序导航', btnArray, function(e) {
//alert(123);
if(e.index == 1) {
if('Android' === plus.os.name && navigator.userAgent.indexOf('StreamApp') > 0) {
plus.nativeUI.toast('当前环境暂不支持地图插件');
return;
}
var dst;
var src = new plus.maps.Point(longt, lat); // 当前位置
// 设置目标位置坐标点和其实位置坐标点
if(venuecode == '000001') {
//dst = new plus.maps.Point(118.844039, 31.948502);118.850465,31.95386
dst = new plus.maps.Point(118.838615, 31.95058);
// 调用系统地图显示
plus.maps.openSysMap(dst, "江宁区博物馆", src);
} else if(venuecode == '000002') {
//dst = new plus.maps.Point(118.843416, 31.955579);118.84976,31.961218
dst = new plus.maps.Point(118.83791, 31.957938);
plus.maps.openSysMap(dst, "江宁区图书馆", src);
} else if(venuecode == '000003') {
//dst = new plus.maps.Point(118.82875, 31.951451);118.835544,31.957474
dst = new plus.maps.Point(118.823694, 31.954194);
plus.maps.openSysMap(dst, "江宁区文化馆", src);
} else if(venuecode == '000004') {
//dst = new plus.maps.Point(118.84254, 31.955886);118.849097,31.961739
dst = new plus.maps.Point(118.837247, 31.958459);
plus.maps.openSysMap(dst, "江宁区群艺馆", src);
} else if(venuecode == '000005') {
//dst = new plus.maps.Point(118.926409, 31.857916);118.932923,31.864317
dst = new plus.maps.Point(118.921073, 31.861037);
plus.maps.openSysMap(dst, "江宁区民俗馆", src);
} else if(venuecode == '000006') {
dst = new plus.maps.Point(118.738544, 31.887185);
plus.maps.openSysMap(dst, "南唐二陵文物保护管理所", src);
} else if(venuecode == '000007') {
dst = new plus.maps.Point(118.731362, 31.905969);
plus.maps.openSysMap(dst, "郑和墓", src);
} else if(venuecode == 'U00001') {
//dst = new plus.maps.Point(118.845796, 31.914046);118.852183,31.919835
//plus.maps.openSysMap(dst, "江宁文广局", src);
dst = new plus.maps.Point(118.840333, 31.91655);
plus.maps.openSysMap(dst, "江宁文广局", src);
} else if(venuecode == '000021') {
dst = new plus.maps.Point(118.825318, 31.95488); //118.837168,31.958716
plus.maps.openSysMap(dst, "东山街道", src);
} else if(venuecode == '000022') {
dst = new plus.maps.Point(118.833733, 31.837692); //118.845583,31.840972
plus.maps.openSysMap(dst, "秣陵街道", src);
} else if(venuecode == '000023') {
dst = new plus.maps.Point(119.059329, 32.057217); //119.071179,32.060497
plus.maps.openSysMap(dst, "汤山街道", src);
} else if(venuecode == '000024') {
dst = new plus.maps.Point(118.927723, 31.940896); //118.939573,31.944176
plus.maps.openSysMap(dst, "淳化街道", src);
} else if(venuecode == '000025') {
dst = new plus.maps.Point(118.859939, 31.777126); //118.871789,31.780406
plus.maps.openSysMap(dst, "禄口街道", src);
} else if(venuecode == '000026') {
dst = new plus.maps.Point(118.603331, 31.866713); //118.615181,31.869993
plus.maps.openSysMap(dst, "江宁街道", src);
} else if(venuecode == '000027') {
dst = new plus.maps.Point(118.695908, 31.873493); //118.707758,31.876773
plus.maps.openSysMap(dst, "谷里街道", src);
} else if(venuecode == '000028') {
dst = new plus.maps.Point(118.980131, 31.862469); //118.991981,31.865749
plus.maps.openSysMap(dst, "湖熟街道", src);
} else if(venuecode == '000029') {
dst = new plus.maps.Point(118.776731, 31.724235); //118.788581,31.727515
plus.maps.openSysMap(dst, "横溪街道", src);
} else if(venuecode == '000030') {
dst = new plus.maps.Point(118.920826, 32.053979); //118.932676,32.057259
plus.maps.openSysMap(dst, "麒麟街道", src);
}
}
});
}
}
function resetMap() {
//map.centerAndZoom(pcenter,12);
map.reset();
}
</script>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top: 45px;
bottom: 0px;
line-height: 200px;
text-align: center;
background: #FFFFFF;
}
.ipos {
background: no-repeat center center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAsCAYAAAAn4+taAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNC8wMS8xNExYUU4AAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAACTklEQVRoge2YO2gUURSGv7PjEkULO4UoFooIFgtzprAPWMiWKewSTadgYWEhBjHCloGUQtYHaGEjGAQtUmgnZO9YpsqC2NgYIwjRInMscoPrYkzhGTIs8zdnzoP578ewM/eumBmjoMZ+L8BLNUjVVINUTTVI1VSDVE0jA3KgjJuGEE6LyI2iKC6JyBkzWxORF8ADVV0rw1O891ohhCngPnDyL+1PZjabZdkTV1OcQUIIV4CHMf0JvAK+A0eANjAWe1dV9ZGbMY6/kTzPzwHzMV0VkZaqTgLTqjopIi1gNfbnQwhnvbzBEcTMbgFHgXURaRdFsRFCWAa+hhCWi6LYEJE2sB7nbnp5g+9b62KMIU3Tvoh0gQm2Fz0hIt00TftAADCztqO3K8h4jJsAZnZ+sDmQ/wAQkXEc5QnyJcZjACLybLApIk/j5YmheRd5gryLMev1elOqesfMrpvZczO7pqqzvV5vGmgNzbvIDUREXsbLRES6IYTbzWZzMcuyy0mSPA4h3BWRxR3PgXkff6/vSJ7nx83sPXBqoLwJFEACHByofxSRC2mafnYxx/GJxEW9GSofAg7zJwTAa08I8N80doG9HrHx++vvJlcQVV0xs6V/zZjZkqquePpCOdv4OWBrl96WiNwrwdMfJMuyHFjYpb2gqh+8PaG8g9Uc0B+q9WO9FJUCoqrfgBm2X73EOBPrpai0o66qvgU6Me3EvDSVctTdUZIknaIoxhqNRmfv6f+T+1F3vzQy/6LUIFVTDVI11SBVUw1SNdUgVdPIgPwCtt+2JPQRVicAAAAASUVORK5CYII=);
background-size: 50px 44px;
}
.mui-content {
width: 100%;
height: 100%;
}
.mui-control-content {
background-color: white;
min-height: 215px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="background: #75b8bd;height:67px;line-height:88px;">
<div class="mui-icon mui-icon-left-nav mui-pull-left mui-action-back" style="color: #fff;margin-top: 20px;"></div>
<div class="nvtt" style="color: #fff;margin-left: 20px;">场馆地图详情</div>
<div οnclick="userLocation();" style="color: #fff;">导航</div>
</header>
<!--<header id="header">
<div class="nvbt iback" οnclick="back();"></div>
<div class="nvtt">场馆地图详情</div>
</header>-->
<div id="map">地图加载中...</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/zepto.min.js"></script>
<script src="../js/underscore.js"></script>
<script src="../js/common.js"></script>
<script type="text/javascript" src="../js/immersed.js"></script>
</html>