<!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>
|
<script type="text/javascript" src="../js/common.js"></script>
|
<script type="text/javascript">
|
var ws=null,wo=null;
|
var em=null,map=null,pcenter=null;
|
// H5 plus事件处理
|
function plusReady(){
|
if(!em||ws){return};
|
// 获取窗口对象
|
ws=plus.webview.currentWebview();
|
wo=ws.opener();
|
//高德地图坐标为(116.3974357341,39.9085574220), 百度地图坐标为(116.3975,39.9074)
|
pcenter = new plus.maps.Point(116.3975,39.9074);
|
setTimeout(function(){
|
map=new plus.maps.Map("map");
|
map.centerAndZoom(pcenter,12);
|
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 userLocation(){
|
map.showUserLocation( true );
|
map.getUserLocation(function(state,pos){
|
if(0==state){
|
map.setCenter(pos);
|
}
|
});
|
}
|
function createMarker(){
|
//高德地图坐标为(116.3406445236,39.9630878208), 百度地图坐标为(116.347292,39.968716
|
var marker=new plus.maps.Marker(new plus.maps.Point(116.347292,39.968716));
|
marker.setIcon("/logo.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 resetMap(){
|
//map.centerAndZoom(pcenter,12);
|
map.reset();
|
}
|
</script>
|
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
|
<style type="text/css">
|
#map {
|
width: 100%;
|
position: fixed;
|
top: 0px;
|
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;
|
} </style>
|
</head>
|
<body>
|
<div id="map">地图加载中...</div>
|
</body>
|
</html>
|
