H5获取地图定位并标记（百度地图）

最新推荐文章于 2024-06-26 20:09:15 发布

qq_39150358

最新推荐文章于 2024-06-26 20:09:15 发布

阅读量4.1k

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/qq_39150358/article/details/83541611

版权

H5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>

<script type="text/javascript" src="../../static/jquery-weui/js/jquery.js"></script>
<script type="text/javascript" src="../../static/jquery-weui/js/flexible.js"></script>

<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>

qq_39150358

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
H5获取地图定位并标记（百度地图）

&lt;!-- HTML5文件 --&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" content="width=device-width,minimum-scale=1.0,maxim
复制链接

扫一扫

专栏目录