<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta content="telephone=no,email=no" name="format-detection">
<meta name="wap-font-scale" content="no">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=zTNaMXHcfGsG0nFvwd6G72aMOo98uzH2"></script>
<title>地图</title>
</head>
<style>
.add-img {
width: 100%;
height: 100%;
top: 0%;
left: 0%;
background-color: rgba(0, 0, 0, 0.6);
}
.add-img>ul {
width: 100%;
bottom: 0%;
left: 0%;
}
.add-img>ul>li {
width: 100%;
padding: 5% 0%;
background-color: #fff;
border-bottom: 1px solid gainsboro;
text-align: center;
font-size: .4rem;
color: #5f5d5e;
}
.bot>ul>li{
padding: 3% 0%;
text-align: center;
font-size: .4rem;
width: 2rem;
}
</style>
<body>
<!--地图展示-->
<div id="allmap" style="width: 100%;height: 11rem;"></div>
<!-- jquery引入 -->
<script type="text/javascript" src="../../static/jquery-weui/js/jquery.js"></script>
<script type="text/javascript" src="../../static/jquery-weui/js/flexible.js"></script>
<!-- weui引入 -->
<script type="text/javascript" src="../../static/jquery-weui/js/jquery-weui.min.js"></script>
<script type="text/javascript">
var pathParam = window.location.search;
var gps=decodeURI(pathParam.split("?gps=")[1]);
var data=gps.split(",");
var x = data[0];
var y = data[1];
document.onreadystatechange = loadingChange;//当页面加载状态改变的时候执行这个方法.
function loadingChange() {
// 百度地图API功能
//var x = 108.953567;
//var y = 34.267509;
var map = new BMap.Map("allmap");
var point = new BMap.Point(x,y);
map.centerAndZoom(point,12);
var mk = new BMap.Marker(point);
map.addOverlay(mk);//标出所在地
map.panTo(point);//地图中心移动
console.log('您的位置:'+point.lng+','+point.lat);
var point = new BMap.Point(point.lng,point.lat);//用所定位的经纬度查找所在地省市街道等信息
var gc = new BMap.Geocoder();
gc.getLocation(point, function(rs){
var addComp = rs.addressComponents;
console.log(rs.address);//打印所在地址
map.addOverlay(mk);
var label = new BMap.Label(rs.address);
mk.setLabel(label); //添加百度label
});
map.enableDragging();
map.enableScrollWheelZoom(true);
}
setTimeout(function(){
loadingChange();
}, 1000);
</script></body>
</html>
H5获取地图定位并标记(百度地图)
猜你喜欢
转载自blog.csdn.net/qq_39150358/article/details/83541611
今日推荐
周排行