微信导航——引入百度地图api

因为公司项目要用到地图导航等功能,而目前微信开放的map组件以及API暂时无法满足需求,所以考虑到引入百度地图的API。

1.注册百度开发账号

地址:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

点击链接进入一下页面,上面有详细介绍。不过目前在我写的时候,教程的图文稍微有点不匹配,重新介绍下。


可以看到有使用方法,点击右上角 控制台。未注册的会引导注册,注册完成的会进入以下页面

点击 创建应用,填写名称  应用类型勾选为微信小程序  以及小程序的APPID填写。最后提交


成功后可以点击 查看应用 这里面就有你所需要的AK了。


2.下载百度地图API的js文件

地址:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/project


假设你已经创建自己的小程序了。点击红框圈中部分开始下载。最后会的到bmap-wx.js和bmap-wx.min.js。一个没压缩一个压缩。

3.引入百度地图API

本人项目路径大概是这样子的,用的是bmap-wx.min.js,体积小点。


在你需要使用的js文件中引入bmap-wx.min.js。使用相对路径。

//引入 bmap-wx.min.js
var bmap = require('../libs/bmap-wx.min.js');
// new一个百度地图对象
var BMap = new bmap.BMapWX({
ak: "先前申请的AK"
});
这样就成功的引入了百度地图API。但是因为使用百度地图的API相当于访问一个https链接,然后返回数据给你,所以需要小程序配置合法域名。

用管理员账号登录微信公众平台,在设置选项里面。配置合法域名 api.map.baidu.com


提交后,打开开发者工具,点击右上角的 详情 ,可以看到刚刚配置的合法域名已经显示在上面了,OK,配置成功。

好了,现在就完成准备工作了。

// new一个百度地图对象
var BMap = new bmap.BMapWX({
ak: "先前申请的AK"
});
先前new的对象就可使用了。

3.上代码,测试一下。

API地址:https://github.com/baidumapapi/wxapp-jsapi

可以看到有四个接口,随便来一个试试吧。

wxml:

<map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap">
</map>

js:

//引入 bmap-wx.min.js
var bmap = require('../libs/bmap-wx.min.js');
// new一个百度地图对象
var BMap = new bmap.BMapWX({
ak: "先前申请的AK"
});

Page({
/**
* 页面的初始数据
*/
data: {
markers: [],
latitude: '',
longitude: '',
},
onLoad: function () {
//首先获取经纬度
this.getWxLocation();
},
//首先获取经纬度
getWxLocation:function(){
var _this = this;
//调用wx.getLocation()获取经纬度
wx.getLocation({
type: 'wgs84',
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
_this.setData({
latitude: latitude,
longitude: longitude
})
//获取成功后调用百度地图检索周边接口
_this.search();
}
})
},
//调用检索周边接口
search: function (){
var _this = this;
BMap.search({
//小程序marker图标 必填
iconPath: '../img/marker_red.png',
//关键字
query: "美食",
success:function(res){
console.log(res);
_this.setData({
markers:res.wxMarkerData
})
},
})
},
//点击marker
makertap: function (e) {
var id = e.markerId;
console.log(this.data.markers[id])
},

在这里是使用search接口查看是否引入正确。
文档上面只有一个必填参数 iconPath,其他的看自己意愿是否填写。
本人这里用到了 query 和 success 。query用来筛选搜索的内容,是选择搜索 美食 还是 酒店 还是其他的,随自己意愿。
success 搜索成功后的回调函数。
我选择在控制台打印一下获得的数据

可以看到打印的数据有两个字段,一个是originalData,一个是wxMarkerData。originalData是他原生的数据,而wxMarkerData是稍作处理了的数据
wxMarkerData可以直接和 map组件中的markers绑定在一起。数组的最大长度为10,本人在测试过程中尚未发现最大长度超过10。
点开其中某一个,可以看到里面有 详细地址,名称,经纬度,电话等信息。

wxss:

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

保存一下代码,小程序页面刷新。


紫色框中的蓝色圆圈就是获取到的位置,周围红色的图标就是markers。map组件上要设置show-location="true"圆圈才会显示出。

随便点击一个marker,可以通过e.markerId获取到该marker的id。通过id,获取改marker的详细信息。

上面的代码可以直接复制粘贴,不过要注意把AK改成自己所申请的。

以上就是全部内容了,欢迎大家指出其中不足。

展开阅读全文

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