WX小程序获取实时位置web端地图（转换）打点

百度地图APIhttp://lbsyun.baidu.com/因为是web端显示所以选择点击立即使用后创建应用选择【浏览器端】其他均按页面指示所填写完成后复制【访问应用（AK）】js中会用到<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=...

小酆年

1274人浏览 · 2019-05-17 16:33:45

小酆年 · 2019-05-17 16:33:45 发布

百度地图API
http://lbsyun.baidu.com/

因为是web端显示所以选择
在这里插入图片描述

点击立即使用后创建应用
选择【浏览器端】其他均按页面指示所填写
完成后复制【访问应用（AK）】js中会用到

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=**此处填写刚刚获取的AK**"></script>
    <title>GPS转百度</title>
</head>
<body>
    <div id="allmap"></div>s
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    //GPS坐标
    var flag=false;
    // 微信获取的经纬度
    var x ="";
    var y ="";
  	if(x==null||y==null){
  		 //默认地址 且不打点
  		 x=116.404;
  		 y=39.915;
  		 flag=true;
  	 }
   	
    var ggPoint = new BMap.Point(x,y);
    //地图初始化
    var bm = new BMap.Map("allmap");
    bm.centerAndZoom(ggPoint, 15);
    bm.addControl(new BMap.NavigationControl());
    bm.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    bm.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    if(flag==false){
        //坐标转换完之后的回调函数
        translateCallback = function (data){
          if(data.status === 0) {
            var marker = new BMap.Marker(data.points[0]);
            bm.addOverlay(marker);
            var label = new BMap.Label("XXX位置 ",{offset:new BMap.Size(20,-10)});
            marker.setLabel(label); //添加百度label
            bm.setCenter(data.points[0]);
          }
        }
        setTimeout(function(){
            var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(ggPoint);
            convertor.translate(pointArr, 1, 5, translateCallback)
        }, 1000);
    }

    
</script>

CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐