maps_map.html 3.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Hello H5+</title>
  9. <script type="text/javascript" src="../js/common.js"></script>
  10. <script type="text/javascript">
  11. var ws=null,wo=null;
  12. var em=null,map=null,pcenter=null;
  13. // H5 plus事件处理
  14. function plusReady(){
  15. if(!em||ws){return};
  16. // 获取窗口对象
  17. ws=plus.webview.currentWebview();
  18. wo=ws.opener();
  19. //高德地图坐标为(116.3974357341,39.9085574220), 百度地图坐标为(116.3975,39.9074)
  20. pcenter = new plus.maps.Point(116.3975,39.9074);
  21. setTimeout(function(){
  22. map=new plus.maps.Map("map");
  23. map.centerAndZoom(pcenter,12);
  24. createMarker();
  25. // 创建子窗口
  26. createSubview();
  27. },300);
  28. // 显示页面并关闭等待框
  29. ws.show("pop-in");
  30. }
  31. if(window.plus){
  32. plusReady();
  33. }else{
  34. document.addEventListener("plusready",plusReady,false);
  35. }
  36. // DOMContentloaded事件处理
  37. document.addEventListener("DOMContentLoaded",function(){
  38. em=document.getElementById("map");
  39. window.plus&&plusReady();
  40. },false);
  41. function userLocation(){
  42. map.showUserLocation( true );
  43. map.getUserLocation(function(state,pos){
  44. if(0==state){
  45. map.setCenter(pos);
  46. }
  47. });
  48. }
  49. function createMarker(){
  50. //高德地图坐标为(116.3406445236,39.9630878208), 百度地图坐标为(116.347292,39.968716
  51. var marker=new plus.maps.Marker(new plus.maps.Point(116.347292,39.968716));
  52. marker.setIcon("/logo.png");
  53. marker.setLabel("HBuilder");
  54. var bubble = new plus.maps.Bubble("打造最好的HTML5移动开发工具");
  55. marker.setBubble(bubble);
  56. map.addOverlay(marker);
  57. }
  58. function createSubview(){
  59. // 创建加载内容窗口
  60. var topoffset='44px';
  61. if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
  62. topoffset=(Math.round(plus.navigator.getStatusbarHeight())+44)+'px';
  63. }
  64. var wsub=plus.webview.create('maps_map_sub.html','sub',{top:topoffset,height:'60px',position:'absolute',scrollIndicator:'none',background:'transparent'});
  65. ws.append(wsub);
  66. }
  67. function resetMap(){
  68. //map.centerAndZoom(pcenter,12);
  69. map.reset();
  70. }
  71. </script>
  72. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  73. <style type="text/css">
  74. #map {
  75. width: 100%;
  76. position: fixed;
  77. top: 0px;
  78. bottom: 0px;
  79. line-height: 200px;
  80. text-align: center;
  81. background: #FFFFFF;
  82. }
  83. .ipos {
  84. 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=);
  85. background-size: 50px 44px;
  86. } </style>
  87. </head>
  88. <body>
  89. <div id="map">地图加载中...</div>
  90. </body>
  91. </html>