1、想在IOS设备上,地图被动态加载出来之后在其上添加一个矩形显示框,类似于“快的打车”顶部的地址显示框。如图1.
2、尝试用过几种方法,包括H5案例中的带“重置”按钮的地图,但是该按钮在Android下显示正常,在IOS设备下却无法显示出来。如图2。
3、咱们的H5-API中提到的Overlay不知可否解决这个问题,只是API文档有些时候看不太明白。
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>
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