JN项目-地图定位优化

之前的地图定位用的是百度地图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>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZHOU_VIP

您的鼓励将是我创作最大的动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值