百度地图也支持小程序了
wangxin • 2017-01-14 22:07• 评论(0) 阅读(4681)
收藏0

今天发现百度地图也支持小程序了,上手了下,集成也很简单。

详细文档




小程序目前只能获取经、纬度, 如果想获取具体的城市、地址就需要借助第三方的了。


百度地图提供了逆地址解析功能,实现经纬度到地址的转换。


如何使用

1. 第一步 创建账号和秘钥(AK)

注册

进入百度开放平台官网,点击右上角“API控制台”,注册成为百度地图开发者。

如果未登录百度账号,会引导登录百度账号。

如果账号未注册,请根据提示填写正确的邮箱及手机号完成开发者注册流程。

js-apiconsle-new.png

创建应用

再次点击进入控制台,创建一个新应用。

creatAK.png

获取密钥(AK)

在创建应用页面,录入应用名称、选择应用类型为"微信小程序"、勾选启用服务、填写AppID(小程序ID)

点击提交后,即可在查看应用页面看到申请成功的密钥(AK)。

apiconsole-ak.JPG


2. 第二步 创建小程序并导入百度地图依赖库

创建本地小程序项目

① 打开微信小程序开发者工具并使用微信确认登录。

② 点击 "+" 按钮,添加项目。

③ 点击 "添加项目" 按钮,项目创建完成。

注意:需勾选"在当前目录中创建quick start项目"。

js-project-create-quickstart-1.png

引入JS模块

在项目根目录下新建一个路径,下载百度地图微信小程序JavaScript API,解压后得到 bmap-xw.js 文件,将其拷贝到新建的路径下,安装完成。

如下图所示,新建路径 "libs" ,将 bmap-xw.js 文件拷贝至 "libs" 路径下。

js-project-create-quickstart-2.png


3. 第三步 在微信公众平台上为刚创建的小程序配置百度地图api域名

① 需要设置请求合法域名,才能正常使用百度小程序 JavaScript API。

登录微信公众平台-> "设置" -> "开发设置" -> "request 合法域名" ->添加 api.map.baidu.com -> 点击"保存并提交",如图所示:

js-requestAK-2.PNG


4. 第四步 写代码了

1、打开快速创建的微信小程序 pages/index/index.js 文件,用下面的代码完全替换原代码。

在以下的代码中,首先引用百度地图微信小程序JavaScript API 模块,然后在页面的onLoad中声明BMapWX对象,最后调用BMapWX.regeocoding方法进行逆地址解析(从经纬度转换为地址信息)。

// 引用百度地图微信小程序JSAPI模块 
var bmap = require('../../libs/bmap-wx.js'); 
var wxMarkerData = []; 
Page({ 
    data: { 
        markers: [], 
        latitude: '', 
        longitude: '', 
        rgcData: {} 
    }, 
    makertap: function(e) { 
        var that = this; 
        var id = e.markerId; 
        that.showSearchInfo(wxMarkerData, id); 
    }, 
    onLoad: function() { 
        var that = this; 
        // 新建百度地图对象 
        var BMap = new bmap.BMapWX({ 
            ak: '您的ak' 
        }); 
        var fail = function(data) { 
            console.log(data) 
        }; 
        var success = function(data) { 
            wxMarkerData = data.wxMarkerData; 
            that.setData({ 
                markers: wxMarkerData 
            }); 
            that.setData({ 
                latitude: wxMarkerData[0].latitude 
            }); 
            that.setData({ 
                longitude: wxMarkerData[0].longitude 
            }); 
        } 
        // 发起regeocoding检索请求 
        BMap.regeocoding({ 
            fail: fail, 
            success: success, 
            iconPath: '../../img/marker_red.png', 
            iconTapPath: '../../img/marker_red.png' 
        }); 
    }, 
    showSearchInfo: function(data, i) { 
        var that = this; 
        that.setData({ 
            rgcData: { 
                address: '地址:' + data[i].address + '\n', 
                desc: '描述:' + data[i].desc + '\n', 
                business: '商圈:' + data[i].business 
            } 
        }); 
    } 
 
})

2、为能够正常展示地图和检索结果,打开 pages/index/index.wxml 文件,用下面的代码完全替换原代码。

<view class="map_container"> 
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map> 
</view> 
<view class="rgc_info"> 
  <text>{{rgcData.address}}</text> 
  <text>{{rgcData.desc}}</text> 
  <text>{{rgcData.business}}</text> 
</view>

3、拷贝样式代码到 pages/index/index.wxss文件。

.map_container{ 
    height: 300px; 
    width: 100%; 
} 
 
.map { 
    height: 100%; 
    width: 100%; 
}

4、最后保存修改,即可看到示例效果。本示例在页面加载完成后对当前定位点进行了逆地址解析,点击marker可以看到当前地点的相关位置描述信息。

rgc.PNG


共0 条评论
  1. 加载评论

评论内容:

发表评论