Yooye
Yooye
  • 发布:2015-06-02 09:54
  • 更新:2015-06-06 12:01
  • 阅读:2370

如何在让页面的元素显示在地图之上?

分类:HTML5+

1、想在IOS设备上,地图被动态加载出来之后在其上添加一个矩形显示框,类似于“快的打车”顶部的地址显示框。如图1.

2、尝试用过几种方法,包括H5案例中的带“重置”按钮的地图,但是该按钮在Android下显示正常,在IOS设备下却无法显示出来。如图2。

3、咱们的H5-API中提到的Overlay不知可否解决这个问题,只是API文档有些时候看不太明白。

2015-06-02 09:54 负责人:无 分享
已邀请:
tzheng517

tzheng517

这个可以通过append子webview的方式实现,可以参考官方的示例即可。

  • Yooye (作者)

    那个“重置”按钮就是以子webview的方式添加的,但是在IOS设备上无法显示出来!

    2015-06-02 10:22

  • tzheng517

    代码贴出来看看 添加的那个代码

    2015-06-02 10:34

  • Yooye (作者)

    回复 tzheng517:

    2015-06-02 10:47

  • tzheng517

    出不来是因为这个:if('Android'!=plus.os.name){

    return;

    }

    2015-06-02 10:55

  • Yooye (作者)

    回复 tzheng517:那个注释之后虽然显示,但是屏幕无法点击了

    2015-06-02 11:00

  • Yooye (作者)

    回复 tzheng517:又重新测试了一下,现在可以了,谢谢

    2015-06-02 11:09

Yooye

Yooye (作者)

<script type="text/javascript">
var ws=null,wo=null;
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
if(!em||ws){return};
// 获取窗口对象
ws=plus.webview.currentWebview();
wo=ws.opener();
setTimeout(function(){
map=new plus.maps.Map("map");
map.centerAndZoom(new plus.maps.Point(106.507568,29.613543),16);
createMarker();
// 创建子窗口
createSubview();
},300);
// 显示页面并关闭等待框
ws.show("slide-in-right",300);
wo.evalJS("closeWaiting()");
}
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(){
var marker=new plus.maps.Marker(new plus.maps.Point(106.507568,29.613543));
marker.setIcon("img/iconfont-location.png");
// marker.setLabel("谢谢");
var bubble = new plus.maps.Bubble("麻烦了");
marker.setBubble(bubble);
map.addOverlay(marker);
}
function createSubview(){
if('Android'!=plus.os.name){
return;
}//这里注释起来也之后可以IOS上显示出来,但是地图变成了静态的,页面也无法点击。
var wsub=plus.webview.create('maps_map_sub.html','sub',{top:'44px',height:'60px',position:'absolute',scrollIndicator:'none',background:'red',border:'1px solid red'});
ws.append(wsub);
}
function resetMap(){
map.centerAndZoom(new plus.maps.Point(106.507568,29.613543),6);
}
</script>

  • 天啦噜

    //这里注释起来也之后可以IOS上显示出来,但是地图变成了静态的,页面也无法点

    请问这个后来怎么解决的啊?@19947

    2016-01-11 22:29

  • Yooye (作者)

    改原生开发了,哈哈~

    2016-01-12 10:02

Yooye

Yooye (作者)

新的问题是!无法再添加侧滑导航!IOS设备不能正常调用侧滑!

fanly

fanly

不知道解决了这个问题没有。我也想知道怎么解决~~~谢谢

  • Yooye (作者)

    目前还没有呢!正在做其他部分

    2015-06-04 14:07

Yooye

Yooye (作者)

要做高仿快的打车里地图操作!这一块功能想外包一下!不知道这里能不能找到技术硬一点的伙伴?QQ:597665748

  • tzheng517

    希望是什么语言开发?

    2015-06-08 09:36

该问题目前已经被锁定, 无法添加新回复