范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-小程序怎么获取百度地图api

09-23 亚博APP
摘要:固然小法式中有各类组件和接口,但只供给了我们一个获得地舆位置和速度的api,并没有获得的相干地位位置

固然小法式中有各类组件和接口,但只供给了我们一个获得地舆位置和速度的api,并没有获得的相干地位位置的信息,是以我们还需要借助一些第三方的api来实现。当前百度和高德周边查询api实现机制根基不异,都是利用request接口要求长途https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面。

小程序怎么获取百度地图api

具体实现步调

1. 建立地图容器

微信小法式建立地图容器相对来讲比力简单,只需要一个map组件便可,下面代码将完成地图容器的建立:

- wxml代码

map组件简介

map组件默许利用腾讯地图,只要在wxml中书写标签便可展现一个简略单纯的地图容器,可是这个地图过分在简单,也没有甚么可操作性,是以该标签还供给了一些非凡属性便利用户可以肆意的操作和位置该组件,下面介绍几个经常使用的属性。longitude & latitude 这两个属性一般都是成对呈现,用在初始化地图中间位置scale 该属性暗示地图的缩放级别,数字越年夜比例尺越小。

2. 地图容器全屏

上面的代码已可以正常的建立地图容器了,可是所建立的地图巨细不敷,所以我们需要给map组件配上style属性,style属性是wxml中几近所有组件均撑持的属性,首要用在给主键设置装备摆设显示结果。以下地图全屏代码同时合用在wxml的其他组件:

- 在map组件上加上style

style=width: 100%;height: {{height}}px;>

在js中动态绑定style的高

对组件的宽度全屏我们可使用100%进行肯定,可是高度全屏100%却不克不及起到任何结果,对此可使用小法式的一个接口wx.getSystemInfo进行获得系统的高度,然后再动态绑定到map组件上。js代码以下:

//index.js

var app = getApp()

Page({

data: {

height: \'auto\'

},

onLoad: function () {

//包管wx.getSystemInfo的回调函数中可以或许利用this

var that = this

//挪用wx.getSystemInfo接口,然后动态绑定组件高度

wx.getSystemInfo({

success:function (res) {

that.setData({

height: res.windowHeight

})

}

})

}

})

3. 引入百度地图小法式api

下载bmap-wx.js

解压后将bmap-wx.js放入小法式工程里面,我这里是建立一个叫utils的文件夹用在保留这些第三方的东西。

在js中利用var bmap =require(\'../../utils/bmap-wx.js\')引入api

注:在最先利用该api之前,我们还需要去百度地图上获得一个微信小法式专用的key,在获得这个key的时辰需要输入方针小法式的appid。

4. 利用api获得周边信息

BMap.search接口是用在获得周边信息的接口,官方描写为:查找并展现定位地址周边的POI信息,很快知道“我四周有甚么”。默许返复生活办事、美食、酒店三种类型的POI。

起首,我们来看一个BMap.search的利用案例:

//index.js

var app = getApp()

//引入百度地图api

var bmap = require(\'../../utils/bmap-wx.js\')

//用在保留BMap.search接口返回的数据

var wxMarkerData = []

Page({

data: {

height: \'auto\',

markers: [],

latitude: \'\',

longitude: \'\'

},

onLoad: function () {

//包管wx.getSystemInfo的回调函数中可以或许利用this

var that = this

//组织百度地图api实例

BMap = newbmap.BMapWX({

ak:\'***************\'

})

//挪用wx.getSystemInfo接口,然后动态绑定组件高度

wx.getSystemInfo({

success:function (res) {

that.setData({

height: res.windowHeight

})

}

})

},

//查询当前位置的poi信息

//官方文档上说可以查询指定位置的周边信息

//但是当前源码中却存在一个bug致使不克不及查询指定位置的周边信息

search:function(e){

var that = this

//查询掉败,直接打印log

var fail = function(data) {

console.log(data)

}

//查询成功后将成果数据动态绑定到页面上

var success =function(data) {

wxMarkerData= data.wxMarkerData;

that.setData({

markers:wxMarkerData

})

that.setData({

latitude:w亚博xMarkerData[0].latitude

})

that.setData({

longitude: wxMarkerData[0].longitude

})

}

//利用百度api查询周边信息

//此中利用到了dataset属性

BMap.search({

query:e.target.dataset.type,

success:success,

fail: fail

})

}

})

从上面代码中可以看出我们为了利用该接口,在页面数据中插手了三个数据:latitude、longitude和markers,别离用在保留当前poi位置和周边信息的标识表记标帜。还看到我们在在page外声名了两个变量,bmap和wxMarkerData, 别离保留当前页面的api进口,poi接口返回数据。因为页面增添数据了,所以对应的页面也需要做出响应的转变,需要对map组件进行简单的点窜:

markers={{markers}}style=width: 100%; height: {{height-30}}px;>

酒店

美食

书店

商场

同时添加了两个简单的wxss,这个wxss是给地图脚下增添的一个简单的导航样式

/**index.wxss**/

.nav{

position: fixed;

z-index: 10000;

bottom: 0px;

width: 100%;

height: 30px;

}

.nav-but{

border: cadetblue 1pxsolid;

border-radius: 0px;

width: 25%;

text-align:center;

line-height: 30px;

display: inline-flex;

}

全部进程下来只需优化下显示结果便可以直接利用了,不外百度api还存在bug,假如不进行修复只能查询当前地址周边地舆信息。

保举浏览:微信小法式怎样建造分页加载数据

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.cqsLin.com

关于我们      深圳亚博定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数