微信小程序之百度地图之定位AND输入地址定位AND输入经纬度定位

1.bmap-wx.min.js

例子链接

2.ak

百度地图平台
ak申请教程

3.getLocation.js

// 引用百度地图微信小程序JSAPI模块
var bmap = require('./bmap-wx.min');
function getLocation(sourceObj, successFun, failFun) {var BMap = new bmap.BMapWX({ak: "#",//申请获取到的ak});// 发起regeocoding检索请求 BMap.regeocoding({success: function (res) {console.log('BMap',res);typeof successFun == 'function' && successFun(res, sourceObj);},fail: function (res) {console.log('fail',res);typeof failFun == 'function' && failFun(res, sourceObj)},});
};module.exports = {getLocation:getLocation,
}

4.app.js

const getLocation = require('./utils/getNowLocation.js');
App({getLocation:getLocation,
});

5.xxx.js

const app = getApp();
Page({data: {markers: [],longitude: '', //经度latitude: '', //纬度address: '', //地址cityInfo: {}, //城市信息},getLocationSuccess(res) {this.setData({markers: res.wxMarkerData,latitude: res.wxMarkerData[0].latitude,longitude: res.wxMarkerData[0].longitude,address: res.wxMarkerData[0].address,cityInfo: res.originalData.result.addressComponent});},fail(err){console.log(err);},onLoad: function (options) {app.getLocation.getLocation(this, this.getLocationSuccess, this.fail);},
})

6.xxx.wxml

 <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}" show-location style="width: 100%; height:100%"></map>

7.app.json

"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}},

报错

1、APP Referer校验失败

解决方法

输入地址定位

getNowLocation.js

// 引用百度地图微信小程序JSAPI模块
var bmap = require('./bmap-wx.min');
var BMap = new bmap.BMapWX({ak: "你的ak",
});
// 获取address定位
function getAddressLocation(sourceObj, successFun, failFun,address) {// 发起geocoding检索请求 BMap.geocoding({address: address, width:30,height:30,iconPath: '/images/icons/center_mark.png',iconTapPath: '/images/icons/center_mark.png',success: function (res) {console.log('BMap', res);typeof successFun == 'function' && successFun(res, sourceObj);},fail: function (res) {console.log('fail', res);typeof failFun == 'function' && failFun(res, sourceObj)},});
};
// 获取当前定位
function getLocation(sourceObj, successFun, failFun) {// 发起regeocoding检索请求 BMap.regeocoding({width:30,height:30,iconPath: '/images/icons/center_mark.png',iconTapPath: '/images/icons/center_mark.png',success: function (res) {console.log('BMap', res);typeof successFun == 'function' && successFun(res, sourceObj);},fail: function (res) {console.log('fail', res);typeof failFun == 'function' && failFun(res, sourceObj)},});
};module.exports = {getLocation: getLocation,getAddressLocation:getAddressLocation,
}

输入经纬度定位

getNowLocation.js

// 引用百度地图微信小程序JSAPI模块
var bmap = require('./bmap-wx.min');
var BMap = new bmap.BMapWX({ak: "",
});
// 获取address定位
function getAddressLocation(sourceObj, successFun, failFun,address) {// 发起geocoding检索请求 BMap.geocoding({address: address, width:30,height:30,iconPath: '/images/icons/center_mark.png',iconTapPath: '/images/icons/center_mark.png',success: function (res) {console.log('BMap', res);typeof successFun == 'function' && successFun(res, sourceObj);},fail: function (res) {console.log('fail', res);typeof failFun == 'function' && failFun(res, sourceObj)},});
};
// 获取当前定位
function getLocation(sourceObj, successFun, failFun) {// 发起regeocoding检索请求 BMap.regeocoding({width:30,height:30,iconPath: '/images/icons/center_mark.png',iconTapPath: '/images/icons/center_mark.png',success: function (res) {console.log('BMap', res);typeof successFun == 'function' && successFun(res, sourceObj);},fail: function (res) {console.log('fail', res);typeof failFun == 'function' && failFun(res, sourceObj)},});
};
// 获取已知经纬度定位
function getLatitudeAndLongitudeLocation(sourceObj, successFun, failFun,lat,lng) {// 发起regeocoding检索请求 BMap.regeocoding({location:lat+','+lng,width:30,height:30,iconPath: '/images/icons/center_mark.png',iconTapPath: '/images/icons/center_mark.png',success: function (res) {console.log('BMap', res);typeof successFun == 'function' && successFun(res, sourceObj);},fail: function (res) {console.log('fail', res);typeof failFun == 'function' && failFun(res, sourceObj)},});
};
module.exports = {getLocation: getLocation,getAddressLocation:getAddressLocation,getLatitudeAndLongitudeLocation:getLatitudeAndLongitudeLocation,
}

微信小程序之百度地图之定位AND输入地址定位AND输入经纬度定位相关推荐

微信小程序地图插件系列（二）：微信小程序使用百度地图（不定期补充知识点）
前言当我们在使用一些地图相关软件的情况下,他会显示选择那种.一般都有高德地图,百度地图等.那么我们在微信小程序中也想使用这种功能需要怎么办呢? 本文地址链接微信小程序-百度地图SDK官方文档微信 ...
微信小程序使用百度地图api
作者:花罚,来自原文地址原理当前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面.本 ...
微信小程序获取百度地图定位
1.指定按钮获取定位 <van-col class="playActive" @click="getLocal()" span="5" ...
微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
之前已经介绍过,如何使用百度地图api来获取地理位置信息微信小程序的百度地图获取地理位置 -- 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息. 1> 第一步:先到百度开放平 ...
微信小程序控制硬件第14篇微信小程序腾讯地图控制 4G Cat.1模组，安信可CA-01加载定位显示当前位置。
文章目录一.前言通讯协议技术问题点二.4G模组业务逻辑上报基站信息三.微信小程序控制另外,不要把我的博客作为学习标准,我的只是笔记,难有疏忽之处,如果有,请指出来,也欢迎留言哈! 微信物 ...
uni-app 中微信小程序使用高德地图等第三方 SDK的方法
获取SDK 首先在高德开放平台,注册账号并且申请相关的 key 等信息: 然后下载它的微信小程序版 SDK:微信小程序 SDK 然后填写app包名,申请原生sdk的appkey信息,但不需要下载原生s ...
微信小程序转百度小程序修改
微信小程序转百度小程序修改百度小程序很多兼容性问题已修复,具体细节请参考官方开发文档:https://smartprogram.baidu.com/docs/develop/fuctionlist/ ...
微信小程序自带地图_【小程序】微信小程序之地图功能
基本使用地图组件使用起来也很简单. .wxml 参数列表及说明如下: 除了显示基本地图,还可以在地图上添加markers–标注,polyline–折线,circles–圆形,controls–控件. ...
地磁北极移动加快，地磁模型紧急更新；微信小程序“老赖地图”上线
(给技术最前线加星标,每天看技术热点) 转自:开源中国.solidot.cnBeta.腾讯科技.快科技等 [技术资讯] 0.地磁北极移动加快,世界地磁模型被迫紧急提前更新据最新一期英国<自然& ...

微信小程序之百度地图之定位AND输入地址定位AND输入经纬度定位

1.bmap-wx.min.js

2.ak

3.getLocation.js

4.app.js

5.xxx.js

6.xxx.wxml

7.app.json

报错

1、APP Referer校验失败

输入地址定位

getNowLocation.js

输入经纬度定位

getNowLocation.js

微信小程序之百度地图之定位AND输入地址定位AND输入经纬度定位相关推荐

最新文章

热门文章