<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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" href="css/index.css" />
<script src="js/mui.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=Q7hhQzxGQt1Ea0Gg1crZjrSWvtY9eqkR" type="text/javascript"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav" id="header">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">请选择实习位置</h1>
<h4 class=" mui-pull-right">确定</h4>
</header>
<div class="mui-content">
<div id="map" style="height: 40vh; 100%;">
</div>
</div>
</body>
<script>
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}else{
document.getElementsByClassName('.mui-content').innerHTML="该手机暂时不支持定位";
}
function showPosition(position){
var la=position.coords.latitude;
var lo=position.coords.longitude;
var map=new BMap.Map('map');
var point = new BMap.Point(lo, la); // 创建点坐标
map.centerAndZoom(point, 15);
/*BMap.Convertor.translate(gpspoint,0,translateCallback);
function translateCallback(point){
console.log(point);
map.centerAndZoom(point,16);
}*/
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}
</script>
</html>