微信导航——引入百度地图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>

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改成自己所申请的。

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

微信导航——引入百度地图api相关推荐

微信小程序连接百度地图API实现天气查询
微信小程序连接百度地图API实现天气查询一.获取百度地图开放平台天气查询API 二.添加百度天气查询域名三.微信小程序代码一.获取百度地图开放平台天气查询API 进入百度地图开放平台.(没有账号 ...
微信小程序百度地图API移动选点
微信小程序百度地图API移动选点本文首发微信小程序百度地图API移动选点因为业务需要使用百度地图API,参考一位大佬编写腾讯API的思路和方法,改造成百度地图API移动选点. 思路: wxml前端 ...
vue3引入百度地图API组件的办法：
第一种全局引入 VueCli3引入百度地图Api详细步骤+宽高自动页面自适应(踩坑+源代码)_BBBling的博客-CSDN博客第二种组件化引入: 第一步安装百度地图依赖包 npm i vue ...
echarts引入百度地图API，设置bmap属性问题
echarts option里的bmap属性结构如下: bmap: {center: [117.239346, 31.824116], // 当前视角中心位置的坐标zoom: 12,roam: tru ...
vue异步引入百度地图API
看了下官网上的方法,是采用原生的写法,不适用于vue 异步引入的好处是baiduAK可以方便管理 import { baiduAk } from '@/settings'export function ...
微信小程序使用百度地图api
作者:花罚,来自原文地址原理当前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面.本 ...
使用Angular8和百度地图api开发《旅游清单》
前言: 本文的目的是通过一步步实现一个旅游清单项目,让大家快速入门Angular8以及百度地图API.我们将收获: Angular8基本用法,架构使用百度地图API实现自己的地图应用解决调用百度地 ...
浏览器中引入百度地图，并带有导航功能
在浏览器中引入百度地图,并带有导航功能 1.去百度地图API官网申请一个密钥,然后引入百度地图API <script type="text/ ...
数据视化Echarts+百度地图API实现市县区级下钻
开始这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
百度地图api自定义修改地图背景样式
引入百度地图api就不用多说了吧! https://developer.baidu.com/map/custom/ //这个网址可以去模拟修改百度地图样式当修改到心仪的样式时,点击生成JSON,就会 ...

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

微信导航——引入百度地图api相关推荐

最新文章

热门文章