微信小程序:高德API之定位。

el/2024/6/24 18:07:59

在开始开发前有几步必要步骤:

1.进入高德地图API官网,登陆,开发支持-微信小程序SDK,控制台,应用管理,创建开发需要的key。注意:服务平台,必须是微信小程序。key用于什么开发就创建什么平台Key。

2.下载 amap-wx.js开发包,https://lbs.amap.com/api/wx/download

3.登录微信公众平台,在 "设置"->"开发设置" 中设置 request 合法域名,将 https://restapi.amap.com 中添加进去

完成以上步骤就可以开始了:

WXML:

<view><map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}" polyline="{{polyline}}"></map>
</view>
<text>{{textData.name}},{{textData.desc}}</text>
<text>{{longitude}}-----{{latitude}}</text>

WXSS:

.map {width: 100%;height: 600rpx;border: 1rpx solid #ededed;
}

JS:

const amapFile = require('../../lib/amap-wx.js') // 引用下载的开发包文件
const mapConf = require('../../lib/config.js')    //引用下载的开发包文件Page({/*** 页面的初始数据*/data: {markers: [],latitude: '',longitude: '',textData: {}},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {var that = this;var key = mapConf.Config.key;var MyAmapFun = new amapFile.AMapWX({key: '创建的Key' });MyAmapFun.getRegeo({iconPath: "../../lib/img/mapicon_navi_s.png", //定位图片自己找个图标iconWidth: 22,iconHeight: 32,success: function (data) {var marker = [{id: data[0].id,latitude: data[0].latitude,longitude: data[0].longitude,iconPath: data[0].iconPath,width: data[0].width,height: data[0].height}]that.setData({markers: marker});that.setData({latitude: data[0].latitude});that.setData({longitude: data[0].longitude});that.setData({textData: {name: data[0].name,desc: data[0].desc}})},fail: function (info) {}})},

结果:

由于是PC 端,应该是按照网络IP地址来定位的。会出现10公里的偏差。

 


http://www.ngui.cc/el/3577141.html

相关文章

微信小程序:高德API-PoI地址搜索

在开始开发前有几步必要步骤&#xff1a; 1.进入高德地图API官网&#xff0c;登陆&#xff0c;开发支持-微信小程序SDK&#xff0c;控制台&#xff0c;应用管理&#xff0c;创建开发需要的key。注意&#xff1a;服务平台&#xff0c;必须是微信小程序。key用于什么开发就创建什…

WebSocket消息推送接收-(微仿滴滴打车业务场景)-(node.js-Vue.js)

年终结尾最后一次更新&#xff0c;在不写一次估计年前就没机会再写了&#xff08;保证一月一次&#xff09;。突然想起之前一个朋友问起实时订单推送如何实现。在年尾没啥事自己也比较感兴趣&#xff0c;简单实现了一下。 1.开始 直接梭。安装websocket依赖库。 //安装 webs…

Node.js 搭建邮件发送服务

在日常的登录&#xff0c;注册中经常会使用到邮件服务&#xff0c;这里记录一个邮件发送服务。以163为例 第一步&#xff1a;下载依赖 npm install nodemailer --save第二步&#xff1a;去163网站获取邮件授权码。 第三步&#xff1a;配置configuration文件。 module.export…

PM2 ecosystem 服务器自动化部署

一&#xff1a;准备工作 1.1 &#xff1a;将项目上传至代码管理库&#xff08;github,gitlab,bitbucket,等&#xff09; 1.2 &#xff1a;Windows 和 服务器 都安装SSH&#xff0c;Git 工具。 二&#xff1a;开始 2.1 本地生成ssh key连接服务器 //根据邮箱生成ssh key ss…

Socket.io 聊天室(代码已开源)

1.启发 1.1 最近得闲有空玩一下Socket.io跟RabbitMQ所以造个小项目自己玩玩。 1.2 当然不是正式项目&#xff0c;个人复习 测试所用。设计部分有的地方也不太合理&#xff0c;UI也是随便弄的。 1.3 有个BUG&#xff0c;这个问题我只在Web端遇到过。描述&#xff1a;Web连…

http预请求,请求两次

在有很多情况下,当我们在js里面调用一次ajax请求时,在浏览器那边却会查询到两次请求,第一次的Request Method参数是OPTIONS,还有一次就是我们真正的请求,比如get或是post请求方式 查阅相关的资料之后发现,这是浏览器对复杂跨域请求的一种处理方式,在真正发送请求之前,会先进行…

三元表达式三个条件校验

表达式1 ? 表达式1为true时的结果 : ( 表达式2 ? 表达式2为true时的结果 : 全都是false的结果 ) 例如&#xff1a;

关于VUE中弹窗鼠标误点关闭的问题

关于VUE中弹窗点击空白处自动关闭问题 只需要在 增加这句话即可 :close-on-click-modal“false” 这样就限定了 弹窗只可以点击小叉叉或者取消来关闭 误点其他地方不会自动关闭 具体使用如图&#xff1a;

静态和非静态的互相访问关系

静态和非静态 1、非静态方法中能访问静态成员。 2、静态方法中不能访问到非静态的成员&#xff0c;只能访问静态成员 3、在非静态类中&#xff0c;可以有静态成员 也可以有非静态成员 4、在静态类中&#xff0c;不允许出现非静态成员 调用&#xff1a;非静态类 使用的时候&…

常见访问修饰符访问权限

访问修饰符&#xff1a; public private internal protect protect internal 其中 public:公开的&#xff0c;没有访问权限&#xff0c;谁都能访问 internal:只能在当前程序集内访问。 private:字段默认的访问修饰符是private 私有的。只能在当前的类的内部访问 protect intern…