<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" href="css/SakuraLegend.css" />
<link rel="stylesheet" href="css/mui.picker.min.css" />
<link rel="stylesheet" href="css/mui.poppicker.css" />
<title>Hello H5+</title>
<style type="text/css">
#map {
width: 100%;
position: fixed;
top:90px;
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;
}
.map_footerdiv {
display: block;
position: fixed;
top: 44px;
left: 0;
width: 100%;
padding: 2.5vw;
background-color: #fff;
z-index: 8888;
padding-bottom: 0;
padding-top: 3vw;
}
.map_footerdiv input{
margin: 0;
}
.map_footerdiv ul {
display: -webkit-box;
position: relative;
}
.map_footerdiv ul li {
-webkit-box-flex: 1;
text-align: center;
padding: 2.5vw 0;
}
.li_mapbottomi {
display: inline-block;
position: relative;
width: 1.4em;
height: 1.4em;
}
.hg_input {
color: #2a2a2a;
width: 100% !important;
display: block;
/* margin-bottom: 0 !important; */
padding: 0 !important;
/* border: none !important; */
font-size: .24rem;
height: .6rem !important;
}
</style>
</head>
<body>
<div class="sl_commonheader">
<div class="sl_commonheader_in">
<a class=" fl " id="back" style="width:1rem;text-align:left;position: absolute;left: 0;top: 0;"><i class="sl_commonleft"></i></a>
<div class="sl_commonheader_middle">
<div class="sl_common_middlediv">
<span class="sl_common_middlespan c_ba f18" style="margin-top: 0;">地图选址</span>
</div>
</div>
<div class="sl_com_localred fr c_re f16 " id='saveAddress'>
确定
</div>
</div>
</div>
<div style="height:4em"></div>
<div id="map">地图加载中...</div>
<div class="map_footerdiv">
<input type="text" name="" id="detail_address" class="hg_input" placeholder="请输入详细地址" />
</div>
</body>
<!--<script type="text/javascript" src="../js/immersed.js" ></script>-->
<script src="js/mui.min.js"></script>
<script src="js/rem.js"></script>
<script src="js/app.js"></script>
<script src="js/myPlus.js"></script>
<script src="js/md5.js"></script>
<script src="js/function.js"></script>
<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
(function($$, doc) {
var myPlus = Object.create(MyPlus);
var address = '';
var lon = '';
var lat = '';
var currentLon = '';
var currentLat = ''
var old_back;
var view
var map
var return_back;
document.getElementById("back").addEventListener('tap', function() {
mui.back()
})
/*通过用户输入详细地址进行搜索*/
/*document.getElementById("detail_address").addEventListener('change',function(){
console.log(7777)
})*/
$('.map_footerdiv').on('keyup','#detail_address',function(){
if(event.keyCode == 13){
console.log('进来了')
/*获取用户输入的详细地址*/
var address=$('#detail_address').val()
/*用户输入地址为空时返回*/
if(address == ''){
return
}
/*通过翻译接口将地址翻译成日文*/
myPlus.ajax('/api/v1/trans', {
data: {
q: address,
to: 'jp',
from:'zh'
},
success: function(resp) {
address=resp[0].dst
},
fail: function(info) {
$.toast(info);
}
})
/*截取6个字进行检索*/
var search_address=address.substring(0,6)
mui.ajax('http://nominatim.openstreetmap.org/search', {
data: {
q:search_address,
format:'json'
},
type: 'get',
dataType: 'json',
success:function(data){
console.log(4444)
//服务器返回响应，根据响应结果，分析是否登录成功；
var once = data[0];
if(once == ' '|| once == undefined || once.lon == undefined){
mui.toast('暂时没搜索到您输入的地址，请核对后再搜索哦！')
mui.back = function() {
old_back();
}
return false;
}
currentLon = once.lon
currentLat = once.lat
lat=currentLat
lon=currentLon
address=once.display_name
//$('#detail_address').val(address)
view.close() // view.close()
/调用地图方法对地图重新构建/
// location2()
//plus.webview.currentWebview().reload()
location()
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
}
})
/构建地图方法/
function location() {
view = view || null
if(view != null){
view.close()
}
view = new plus.nativeObj.View('marker', {
top: '46%',
left: '45%',
height: '5%',
width: '10%'
}, [{
tag: 'img',
id: 'img',
src: 'http://yinghua.buy23.cn/map.png',
position: {
top: '0',
left: '0',
width: '100%',
height: '100%'
}
}]);
view.show();
map = map || null
if(map != null){
map.close()
}
map = new plus.maps.Map("map", {
zoomControls: true, // 缩放
position: 'absolute', // 地图固定
traffic: true
});
//map.setMapType( plus.maps.MapType.MAPTYPE_NORMAL );
/*设置中心点*/
var center = new plus.maps.Point(currentLon, currentLat);
map.setCenter(center)
/*监听地图拖动事件*/ // map.onstatuschanged = function(event) {
// console.log(JSON.stringify(event));
// var center = event.center;
//
// var centerPoint = new plus.maps.Point(center.longitude, center.latitude);
// plus.maps.Map.reverseGeocode(centerPoint, {},
// function(event) {
// console.log(JSON.stringify(event));
//
// address = event.address;
// lat = event.coord.latitude;
// lon = event.coord.longitude;
// $('#detail_address').val(address)
// },
// function(event) {
// console.log(JSON.stringify(event))
// })
// }
}
/保存地址返回上一级页面/
document.getElementById('saveAddress').addEventListener('tap', function() {
console.log(lat, lon, address)
address=$('#detail_address').val()
if(lat == 0 || lon == 0) {
$$.toast('请拖动地图选址!');
return false;
};
if(address == '') {
$$.toast('地址不存在，请重新拖动地图!');
return false;
}
view.hide();
view.close()
var wvList = plus.webview.all();
$$.fire(wvList[wvList.length - 2], 'location', {
'lon': lon,
'lat': lat,
'address': address,
});
mui.back();
plus.webview.currentWebview().close()
})
var app = Application.createNew($$, {
init: function() {
myPlus.initPage(function(self) {
$$.init({
swipeBack: false
})
old_back = mui.back;
return_back = mui.back;
mui.back = function() {
view.close();
old_back();
}
var wv = plus.webview.currentWebview();
// 关闭侧滑返回功能
wv.setStyle({
'popGesture': 'none'
});
if(self.address != '' && self.address != undefined){
var one=self.address.split(',')
var search_address=one[0]
$('#detail_address').val(self.address)
mui.ajax('http://nominatim.openstreetmap.org/search', {
data: {
q:search_address,
format:'json'
},
type: 'get',
dataType: 'json',
success:function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
var once = data[0];
console.log('地址:'+JSON.stringify(data))
if(once == ' '|| once == undefined || once.lon == undefined){
mui.toast('暂时没搜索到您输入的地址，请核对后再搜索哦！')
mui.back = function() {
old_back();
}
return false;
}
currentLon = once.lon
currentLat = once.lat
lat=currentLat
lon=currentLon
address=once.display_name
location()
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
}else{
plus.geolocation.getCurrentPosition(function(position){
currentLon=position.coords.longitude
currentLat=position.coords.latitude
location()
},function(e){
console.log(JSON.stringify(e))
currentLon=139.767701
currentLat=35.667505
location()
});
}
// var point = new plus.maps.Point(138.793868,36.848619);
// plus.maps.Map.reverseGeocode(point,{coordType: 'bd09ll'},function(event){
// var address = event.address; // 转换后的地理位置
// var point = event.coord; // 转换后的坐标信息
// var coordType = event.coordType; // 转换后的坐标系类型
// console.log(point.longitude, point.latitude)
// currentLon = point.longitude
// currentLat = point.latitude
// console.log(JSON.stringify(event))
//// alert("Address:"+address);
// },function(e){
// alert("Failed:"+JSON.stringify(e));
// });
// plus.maps.Map.geocode("名古屋", {city: '日本'},function(event){
// console.log(JSON.stringify(event))
// var address = event.address; // 转换后的地理位置
// var point = event.coord; // 转换后的坐标信息
// var coordType = event.coordType; // 转换后的坐标系类型
// console.log(JSON.stringify(point))
// currentLon=point.longitude;
// currentLat=point.latitude;
// location()
//// alert("Coord:"+JSON.stringify(point));
// },function(e){
// alert("Failed:"+JSON.stringify(e));
// });
})
}
});
doc.addEventListener('plusready', function() {
app.init();
})
})(mui, document)
</script> </html>
在苹果上输入位置后能够重新绘制地图，但是安卓上，键盘会挤压页面导致地图没有铺满，并且地图也不会重新绘制
1 个回复
Bridegroom777 (作者) - emmm