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 onclick="userLocation();" style="color: #fff;">導航</div>
</header>
<!--<header id="header">
<div class="nvbt iback" onclick="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>相關文章
- iOS 地圖定位 地圖iOS地圖
- iOS 地圖定位 定位iOS地圖
- 【騰訊地圖】騰訊地圖定位解析地圖
- JN專案-時間查詢條件驗證
- Vue專案優化Vue優化
- [盤點] 專案中可以怎麼優化圖片優化
- vue專案初次優化Vue優化
- Android專案匯入高德地圖Android地圖
- Swift 專案總結 08 GIF 圖片載入優化Swift優化
- 如何優雅地定位外網問題？
- mpvue + iview 專案分包優化VueView優化
- Vue專案架構優化Vue架構優化
- vue 專案中引用百度地圖Vue地圖
- vue專案中使用百度地圖Vue地圖
- R.swift-優雅地引用專案資源Swift
- 百度地圖，點聚合展示速度優化地圖優化
- 21.4 Python 使用GeoIP2地圖定位Python地圖
- 實現地圖實時定位，拯救“路痴”地圖
- Flutter整合高德定位和地圖功能Flutter地圖
- 騰訊地圖定位及座標解析地圖
- Vue SPA專案優化小記Vue優化
- Laravel 專案深度優化過程Laravel優化
- vuejs專案效能優化總結VueJS優化
- 跟著專案學 android canvas——InDoorView 地圖引擎AndroidCanvasView地圖
- php怎麼實現定位地圖顯示PHP地圖
- 《圖解 C# 教程 第 5 版》與效能優化（附 Unity 專案）圖解C#優化Unity
- Vue SPA 專案webpack打包優化指南VueWeb優化
- React中型專案的優化實踐React優化
- Vue 專案效能優化 — 實踐指南Vue優化
- 深入淺出 webpack(vue 專案優化)WebVue優化
- SpringBoot專案校驗規則優化Spring Boot優化
- 記一次 Webpack 專案優化Web優化
- Vue專案優化打包——前端加分項Vue優化前端
- 在 HTTPS 專案中使用百度地圖 APIHTTP地圖API
- 3倍+提升，高德地圖極致效能優化之路地圖優化
- javaweb使用高德地圖進行網頁定位JavaWeb地圖網頁
- 用HMS Core地圖服務自定義地圖樣式，給你的應用製作專屬個性化地圖地圖
- 在React專案中，如何優雅的優化長列表React優化