微信小程序使用百度地图API逆地址解析

今天自己研究小程序模仿饿了么,首页的顶部有一个定位功能,看了一圈儿觉得百度地图的API最简单,于是就用了百度地图的api,写的教程,或者说记录一下,以后有需要的时候可以用到。

先上一下成果图


哈哈哈banner图随便找的轻拍。

不多逼逼了咱们一步一步来:

第一步:参考微信小程序文档,了解如何获得经纬度

文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxgetlocationobject

代码:

wx.getLocation({
  type: 'wgs84',
  success: function(res) {
    var latitude = res.latitude     //经度
    var longitude = res.longitude   //纬度
    var speed = res.speed           
    var accuracy = res.accuracy
  }
})

主要是获取经纬度(latitude 和 longitude)这两个结果就可以了。

明白怎么获取了以后,我们接下来需要利用经纬度把数值转换成具体地址(也是个模糊地址)

第二步:申请百度地图密钥

文档地址:http://lbsyun.baidu.com/index.php?title=wxjsapi 里面讲的非常详细从申请密钥到去微信公众平台添加请求地址

照着文档一步一步来就可以了。

文档部分可以只看到下载并部署好百度地图api和配置好微信公众平台后台设置这边。

第三步:编写微信小程序JS代码 拿到最终的地址

     1. 引用百度地图js

    // 引用百度地图微信小程序JSAPI模块
var bmap = require('../../libs/bmap-wx.js')

     2.data中定义三个字段初始化经度、纬度、具体地址坐标

data: {
    latitude       :0,
    longitude      :0,
    loactionString :''
  },

      3.在onLoad中先拿到经纬度在请求百度地图api拿到具体地址
 onLoad: function () {

    var that = this;
    var BMap = new bmap.BMapWX({
      ak: 'TtDsogG1RRzboHL02oEdU33Xd8iXlLkB'
    });
    
    //请求百度地图api并返回模糊位置
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        that.setData({
           latitude : res.latitude  ,//经度
           longitude : res.longitude//纬度
        })
        BMap.regeocoding({
          location: that.data.latitude + ',' + that.data.longitude,
          success: function (res) { 
            that.setData({
              loactionString: res.originalData.result.formatted_address
            })
          },
          fail: function () {
            wx.showToast({
              title: '请检查位置服务是否开启',
            })
           },
        });
      },
      fail:function(){
        console.log('小程序得到坐标失败')
      }
    })
  },
以上代码相当清晰了 不一步步注释了 (太困了写不下去了,有时间会回来补充的)
发布了4 篇原创文章 · 获赞 7 · 访问量 2万+
展开阅读全文

关于百度地图API 地址解析的问题

07-07

![图片说明](https://img-ask.csdn.net/upload/201707/07/1499417805_418604.png) 当我每次点击签到的时候,地址通过JS解析出来并存在下表中。但是在手机端就用不了 ``` <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,12); var geoc = new BMap.Geocoder(); map.addEventListener("click", function(e){ var pt = e.point; geoc.getLocation(pt, function(rs){ var addComp = rs.addressComponents; alert(addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); }); }); var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ if(this.getStatus() == BMAP_STATUS_SUCCESS){ var mk = new BMap.Marker(r.point); map.addOverlay(mk); map.panTo(r.point); $("#lng").val(r.point.lng) $("#lat").val(r.point.lat) }else { alert('failed'+this.getStatus()); } },{enableHighAccuracy: true}) }); </script> <script type="text/javascript"> $(document).ready(function(){ var lng = $("#lng").val(); var lat = $("#lat").val(); //动态加载script文件 var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location='+lat+','+lng+'&output=json&pois=1&ak=秘钥; head.appendChild(script); }); //逆地址解析 function renderReverse (data) { var json_str=JSON.stringify(data); var obj = JSON.parse(json_str); var obj2=JSON.stringify(obj.result); var obj3=JSON.parse(obj2); document.getElementById('coord').value=obj3.formatted_address; //alert(obj3.formatted_address) } </script> ``` 是兼容性的问题吗? 还有就是在火狐浏览器可以,别的浏览器也定位不到 哪儿大哥帮小弟解决一下小弟QQ:745419653 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览