当前位置：首页 > news >正文

微信小程序调用腾讯地图-并解读API文档 JavaScript SDK和 WebService API

news 来源：原创 2025/6/22 11:06:21

搜索：腾讯位置服务

找到API文档：

入门中第一步：申请开发者密钥key

前往控制台：

创建应用并获取key:

设置key的时候，还需要小程序的APPID。所以要前往微信公众平台中获取小程序的APPID：

限制要求：

添加配额：

看清哪一个key并且设置配额。如果有多个key，也可以根据特别的某些key进行分配额度：

下载地图的SDK：

并放入项目中：

添加服务器域名白名单：

登录微信公众平台：

设置白名单：

搜索地址：

实际开发者工具中截图：

坐标地图：

wxml：

最终展示：点击搜索周边KFC就出现红色的预设值坐标的地址。

具体代码：

map.js

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
Page({data: {markers: []},onLoad: function () {// 实例化API核心类this.qqmapsdk = new QQMapWX({key: '************************ // 替换为你的QQ地图SDK密钥});},// 事件触发，调用接口nearby_search: function () {var _this = this;// 调用接口this.qqmapsdk.search({keyword: 'kfc',  // 搜索关键词location: '39.980014,116.313972',  // 设置周边搜索中心点success: function (res) { // 搜索成功后的回调var mks = [];for (var i = 0; i < res.data.length; i++) {mks.push({ // 获取返回结果，放到mks数组中title: res.data[i].title,id: parseInt(res.data[i].id), // 将 id 转换为整数形式latitude: res.data[i].location.lat,longitude: res.data[i].location.lng,iconPath: "/assets/icon/position.png", // 图标路径width: 20,height: 20});}_this.setData({ // 设置markers属性，将搜索结果显示在地图中markers: mks});},fail: function (res) {console.log('搜索失败', res);},complete: function (res) {console.log('搜索完成', res);}});}
});

wxml:

<!--绑定点击事件-->
<button bindtap="nearby_search">搜索周边KFC</button>
<!--地图容器-->
<map id="myMap"markers="{{markers}}"style="width:100%;height:300px;"longitude="116.313972"latitude="39.980014" scale='16'>
</map>

注意：

1 调用API有次数和额度限制。

2 调用的接口要开通相应的接口权限。

示例2： “关键词输入提示”

接口调用说明：

前往开通配额：

代码：

wxml:

实际wxml:

**.js 注意js代码不要全部拷贝，而是将methods的部分放在Page()中：

实际**.js:

最后展示：

调用WebService API

举例：定位服务 --IP定位

wxml:

<view class="container"><view class="map-container"><map id="map" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" style="width: 100%; height: 400px;"></map></view><view class="info-container"><view class="info-item"><text class="info-label">国家：</text><text class="info-value">{{nation}}</text></view><view class="info-item"><text class="info-label">省份：</text><text class="info-value">{{province}}</text></view><view class="info-item"><text class="info-label">城市：</text><text class="info-value">{{city}}</text></view></view>
</view>

js:

Page({data: {latitude: 0, // 地图中心点纬度longitude: 0, // 地图中心点经度markers: [], // 地图标记点nation: '', // 国家province: '', // 省份city: '', // 城市},onLoad: function () {// 发起获取当前IP定位信息的请求this.getLocationByIP();},getLocationByIP: function () {// 替换成你自己申请的腾讯地图API密钥const key = '************************';const apiUrl = `https://apis.map.qq.com/ws/location/v1/ip?key=${key}`;wx.request({url: apiUrl,method: 'GET',success: (res) => {console.log('IP定位结果：', res.data);if (res.data.status === 0) {const { location, ad_info } = res.data.result;const { lat, lng } = location;const { nation, province, city } = ad_info;// 更新页面数据，显示定位信息this.setData({latitude: lat,longitude: lng,markers: [{id: 1,latitude: lat,longitude: lng,title: city,iconPath: '/images/location.png', // 可自定义标记图标width: 30,height: 30}],nation: nation,province: province,city: city});} else {wx.showToast({title: '定位失败，请稍后重试',icon: 'none',duration: 2000});}},fail: (error) => {console.error('请求失败：', error);wx.showToast({title: '网络请求失败，请检查网络后重试',icon: 'none',duration: 2000});}});}
});

wxss:

.container {display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 20px;
}.map-container {width: 100%;margin-bottom: 20px;
}.info-container {width: 100%;background-color: #f0f0f0;padding: 10px;border-radius: 8px;
}.info-item {display: flex;flex-direction: row;margin-bottom: 5px;
}.info-label {font-weight: bold;
}.info-value {margin-left: 5px;
}

最终展示：

微信小程序调用腾讯地图-并解读API文档 JavaScript SDK和 WebService API

搜索：腾讯位置服务找到API文档： 入门中第一步：申请开发者密钥key 前往控制台： 创建应用并获取key: 设置key的时候，还需要小程序的APPID。所以要前往微信公众平台中获取小程序的APPID： 限制要求&#xff1a…...

编程日记 2025/6/22 11:06:21

go build command

文章目录 1.简介2.格式3.选项4.示例5.小结参考文献 1.简介 go build 是 Go 语言工具链中的一个命令，它用于编译 Go 源代码并生成可执行文件。 2.格式 go build [-o output] [build flags] [packages]可选的 -o 选项强制 build 将生成的可执行文件或对象写入指定的…...

编程日记 2025/6/22 10:18:08

前端面试题目 (Node.JS-Express框架)[二]

在 Express 中如何使用 Passport.js 进行身份认证? Passport.js 是一个 Node.js 的身份验证中间件，它可以很容易地与 Express 集成。下面是一个简单的示例，展示了如何使用 Passport.js 进行基本的身份认证。安装依赖 npm install express passport …...

编程日记 2025/6/22 10:52:55

云和恩墨 zCloud 与华为云 GaussDB 完成兼容性互认证

近日，云和恩墨（北京）信息技术有限公司（以下简称：云和恩墨）的多元数据库智能管理平台 zCloud 与华为云计算技术有限公司（以下简称：华为云）的 GaussDB 数据库完成了兼容性互…...

编程日记 2025/6/22 10:37:08

go-zero(十三)使用MapReduce并发

go zero 使用MapReduce并发一、MapReduce 介绍 MapReduce 是一种用于并行计算的编程模型，特别适合在大规模数据处理场景中简化逻辑代码。官方文档： https://go-zero.dev/docs/components/mr 1. MapReduce 的核心概念在 MapReduce 中，主…...

编程日记 2025/6/22 9:45:47

【鸿蒙实战开发】数据的下拉刷新与上拉加载

本章介绍本章主要介绍 ArkUI 开发中最常用的场景下拉刷新, 上拉加载，在本章中介绍的内容在实际开发过程当中会高频的使用,所以同学们要牢记本章的内容。下面就让我们开始今天的讲解吧！ List 组件在 ArkUI 中List容器组件也可以实现数据滚动的效果&a…...

编程日记 2025/6/22 10:37:09

这条 SQL 语句的作用是将 tool_tool 表中所有 link 字段包含 https://www.xxspvip.cn 的记录中的 https://www.xxspvip.cn 替换为 http://192.168.1.1。具体解释如下： SQL 语句分解 UPDATE tool_toolSET link REPLACE(link, https://www.xxspvip.cn, http://192.…...

编程日记 2025/6/3 13:02:40

算法（三）——贪心算法

文章目录定义基本原理基本思路优缺点优点缺点经典案例及解析找零问题问题描述贪心思路算法解析java代码示例活动选择问题问题描述贪心思路算法解析java代码示例车辆路径问题问题描述贪心思路算法分析java代码示例定义贪心算法是指在求解问题时，总是做出在当前…...

编程日记 2025/6/22 10:30:14

【Iot】前端串口serialport.js串口通信库快速入门（附经验总结）

前端串口serialport.js串口通信库快速入门（附经验总结）一、serialport简介1.1 安装1.2 基本用法1.3 完整示例代码二、问题2.1 数据包被拆分(已解决)2.2 串口返回的多种数据，如何区分类别（待解决）公司项目需要开发一个windows客户端，提供串口modbusRTU数据读取、处理、显…...

编程日记 2025/6/22 8:15:41

【学一点儿前端】本地或jenkins打包报错：getaddrinfo ENOTFOUND registry.nlark.com

问题今天jenkins打包一个项目，发现报错了 error An unexpected error occurred: “https://registry.nlark.com/xxxxxxxxxx.tgz: getaddrinfo ENOTFOUND registry.nlark.com”. 先写解决方案把yarn.lock文件里面的registry.nlark.com替换为registry.npmmirror.…...

编程日记 2025/6/21 15:37:29

STEM真题第五题比 n 小的最大数

题目描述给定一个正整数 n，请将 n 中的每位数字重新排列并组成一个新数，要求新数的值要小于 n，请找出所有符合要求的新数中最大的那个正整数，如果不存在这样的正整数，则输出 -1。例 1：n 312&#xff0…...

编程日记 2025/6/22 10:51:36

Mysql基础操作（1）

目录简介 1. 数据库的创建与删除 1.1 创建数据库 1.2 删除数据库 2. 表的创建与删除 2.1 创建表 2.2 删除表 3. 数据插入 4. 数据查询 4.1 基本查询 4.2 条件查询 4.3 多条件查询 4.4 排序查询 4.5 分页查询 5. 数据更新 6. 数据删除 7. 总结简介 MySQL 是一…...

编程日记 2025/6/21 19:18:20

React Image Crop——在React应用中轻松实现图片裁剪功能

React Image Crop是一个用于在React应用程序中裁剪和调整图像的库。它提供了一个简单而强大的界面，允许用户选择和调整裁剪区域，并生成裁剪后的图像。什么是React Image Crop？ React Image Crop是一个开源的React组件，用于在浏览…...

编程日记 2025/6/22 10:13:11

CQRS Design Pattern in Microservices - CQRS模式

原文链接 CQRS Design Pattern in Microservices - GeeksforGeeks 【文章看起来像是AI写的。。。 😂😂😂】简介实现步骤 1，识别有界上下文：（Identify Bounded Contexts:） 2，命…...

编程日记 2025/6/20 1:52:42

Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目：药品进销存信息管理系统（前后端源码 + 数据库 sql 脚本）

🔥博客主页： 【小扳_-CSDN博客】 ❤感谢大家点赞👍收藏⭐评论✍ 文章目录 1.0 项目介绍 1.1 项目功能 2.0 用户登录功能 3.0 首页界面 4.0 供应商管理功能 5.0 药品管理功能 6.0 采购记录管理功能 7.0 销售记录管理功能 8.0 退货记录管理功能…...

编程日记 2025/6/2 17:36:58

主流webgl 引擎 glsl 如何升级webgpu为 wgsl?

0、背景 SPIR-V、GLSL 和 WGSL 是三种不同的着色语言或中间表示形式，它们在现代图形编程中的关系如下： 1、playcanvas 方案: glsl 转 SPIR-V 转 wgsl 调研版本: "version": "2.4.0-dev"webgpu-shader.js transpile(src, shader…...

编程日记 2025/5/29 14:54:02

SSL证书部署(linux-nginx)

一、SSL证书的作用 HTTP协议无法加密数据，数据传输可能产生泄露、篡改或钓鱼攻击等问题。 SSL证书部署到Web服务器后，可帮助Web服务器和网站间建立可信的HTTPS协议加密链接，为网站安全加锁，保证数据安全传输。二、前提条件 1.已通过数字证书管理服务控制台签发证书。 …...

编程日记 2025/6/21 17:44:28

SpringBoot3.3.0集成Knife4j4.5.0实战

原SpringBoot2.7.18升级至3.3.0之后，Knife4j进行同步升级(Spring Boot 3 只支持OpenAPI3规范)，从原3.0.3(knife4j-spring-boot-starter)版本升级至4.5.0(knife4j-openapi3-jakarta-spring-boot-starter)，以下是升级过程与注意事项等版本信息…...

编程日记 2025/6/22 10:37:08

C# 的反射窗体的使用

C# 的反射窗体的使用 using System; using System.Reflection; using System.Windows.Forms;public class ReflectedFormFactory {public static Form CreateForm(string formName, string assemblyName){// 加载程序集Assembly assembly Assembly.Load(assemblyName);// 获取…...

编程日记 2025/5/31 8:50:53

大模型呼出机器人能够解决哪些问题？

大模型呼出机器人能够解决哪些问题？ 原作者：开源呼叫中心FreeIPCC，其Github：https://github.com/lihaiya/freeipcc 大模型呼出机器人作为现代科技在客户服务领域的创新应用，能够解决多个方面的问题，以下是…...

编程日记 2025/6/22 10:56:42

密码学——密码学概述、分类、加密技术（山东省大数据职称考试）

大数据分析应用-初级第一部分基础知识一、大数据法律法规、政策文件、相关标准二、计算机基础知识三、信息化基础知识四、密码学五、大数据安全六、数据库系统七、数据仓库. 第二部分专业知识一、大数据技术与应用二、大数据分析模型三、数据科学密码学大数据…...

编程日记 2025/6/22 1:22:05

Linux 入门教程：从命令行开始

Linux 是一个强大且灵活的操作系统，广泛应用于服务器、嵌入式设备、开发环境等领域。如果你是刚接触 Linux 的新手，最重要的一步就是掌握命令行操作。虽然 Linux 提供了图形界面，但很多强大功能只能通过命令行来实现。今天，我们就…...

编程日记 2025/5/30 17:01:25

Python中的异步编程：从基础到实践

在现代编程中，异步编程已经成为提高程序性能和响应能力的重要手段。Python，作为一种动态、解释型的高级编程语言，提供了多种异步编程的解决方案。本文将从Python异步编程的基础知识出发，逐步深入到实际应用中，帮助读者理解和掌握这一技术。 1. 异步编程简介异步编程是一…...

编程日记 2025/6/22 10:09:22

如何使用 Python 实现简单的 Web 服务器？

为了实现一个简单的Web服务器，Python提供了多种方法。对于快速原型设计和学习目的来说，最简单的方法之一是使用内置的http.server模块。然而，在实际开发中，更常见的做法是使用像Flask或Django这样的框架来构建更为复杂的应用程序…...

编程日记 2025/5/30 2:32:44

【unity小技巧】unity最完美的CharacterController 3d角色控制器，实现移动、跳跃、下蹲、奔跑、上下坡、物理碰撞效果，复制粘贴即用（2024/12/12补充）

最终效果文章目录最终效果更好的方式（2024/12/12补充）前言为什么使用CharacterControllerSimpleMove和Move如何选择？1. SimpleMove2. Move 配置CharacterController参数控制相机移动跳跃方式一方式二下蹲处理下坡抖动问题实现奔跑和不同移…...

编程日记 2025/6/22 1:26:36

6_Sass 选择器函数 --[CSS预处理]

Sass 提供了一系列的选择器函数，用于操作和组合CSS选择器。这些函数可以帮助你更灵活地创建样式规则，并且可以减少重复代码。以下是几个常用的选择器函数及其用法： 1. selector-append($selector1, $selector2...) selector-append($select…...

编程日记 2025/6/22 9:57:51

系列2:基于Centos-8.6Kubernetes 集成GPU资源信息

每日禅语自省，就是自我反省、自我检查，自知己短，从而弥补短处、纠正过失。佛陀强调自觉觉他，强调以达到觉行圆满为修行的最高境界。要改正错误，除了虚心接受他人意见之外，还要不忘时时观照己身。自省自悟之…...

编程日记 2025/6/4 10:39:40

C# 探险之旅：第三十五节 - 类型class之抽象类 (Abstract Class) 和抽象方法 (Abstract Method)

👋 嗨，勇敢的探险家们！欢迎再次踏上C#的神秘之旅。今天，我们要进入一片既神秘又充满无限可能的领域——抽象类与抽象函数的奇幻森林。想象一下，你是一名勇敢的骑士，要在这片森林里寻找传说中的“编程之宝”…...

编程日记 2025/6/22 9:38:45

npm内存溢出

项目过大运行项目内存溢出报错代码运行内存溢出 increase-memory-limit ‘“node --max-old-space-size8192”’ 不是内部或外部命令，也不是可运行的程序 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of m…...

编程日记 2025/6/22 10:11:56

CSS|08 浮动清除浮动

浮动需求: 能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度! 让多个元素排在同一行:行内元素的特性给这些元素设置宽高:块级元素的特性在标准文档流中的元素只有两种:块级元素和行内元素。如果想让一些元素既要有块级元素的特点也要有行内元素的特…...

编程日记 2025/6/21 21:55:19

【学习笔记】反向传播到底是如何进行的？

文章目录一、写在前面二、举个例子三、混合损失函数如何进行呢？ 一、写在前面不知道小伙伴们有没有考虑过这种感觉，在最开始学习深度学习的时候，一定都了解过前向传播，反向传播等等，但是在实际的操作过程中却“几乎…...

编程日记 2025/6/2 23:09:53

利用cnocr库完成中文扫描pdf文件的文字识别

很多pdf文件文字识别软件都会收费，免费的网页版可能会带来信息泄露，还有一些类似于腾讯AI和百度AI的接口都有调用次数限制，因此，利用识别正确率极高且免费的cnocr库来自己动手做个pdf文件文字识别程序就是一个很不错的选择。以下程…...

编程日记 2025/6/2 23:09:51

el-table ToggleRowSelection实现取消选中没效果（virtual-scroll）

场景： 就是在虚拟列表el-table选中之后点击查询默认之前选中的现象： 就是实现选中， 但是无法去除勾选等等问题发现： 看定位的数据有多个一样的，我想着勾选之前先去掉勾选 ，但是没效果或者说“相同的…...

编程日记 2025/6/21 0:24:07

Vue入门到精通：运行环境

Vue入门到精通：运行环境 Vue3的运行环境搭建主要有两种方法：一种是直接在页面中引入Vue库，另一种是通过脚手架工具创建Vue项目。 （一）页面直接引入Vue库页面直接引入Vue库的方法，是指在HTML网页中通过s…...

编程日记 2025/6/21 22:27:38

LNK2001: virtual struct QMetaObject const 错误的解决方法和原因

目录 1.现象 2.原因分析 3.解决方法 3.1.方法1 3.2.方法2 1.现象今天调整了下工程目录结构(环境是VS2019Qt5.12.12)，重新编译突然出现以下错误： 没有修改代码，怎么就出现这个错误了呢？从上面的错误来看，其实就是…...

编程日记 2025/6/3 17:29:04

电脑win11家庭版升级专业版和企业版相关事项

我的是零刻ser9，自带win11家庭版，但是我有远程操控需求，想用windows系统自带的远程连接功能，所以需要升级为专业版。然后在系统激活页面通过更改序列号方式，淘宝几块钱买了个序列号升级成功专业版了。但是，…...

编程日记 2025/6/4 9:57:08

用户认证系统登录界面

下面是使用HTML和JavaScript实现的一个中文版登录界面，包含登录、注册和修改密码功能。注册成功后会显示提示信息，在登录成功后进入一个大大的欢迎页面。 1.代码展示 <!DOCTYPE html> <html lang"zh-CN"> <head><meta …...

编程日记 2025/6/4 4:40:20

深圳国威HB1910数字IP程控交换机 generate.php 远程命令执行漏洞复现

0x01 产品描述：深圳国威主营国威模拟、数字、IP 交换机、语音网关、IP 电话机及各种电话机。深圳国威电子有限公司HB1910是一款功能强大的网络通信设备，适用于各种企业通信需求。 0x02 漏洞描述：深圳国威电子有限公司HB1910数字IP程控交换机generate.php存在远程命令执行…...

编程日记 2025/6/20 16:17:39

客户端（浏览器）vue3本地预览txt，doc，docx，pptx，pdf，xlsx，csv，

预览文件 1、入口文件preview/index.vue2、预览txt3、预览doc4、预览pdf5、预览pptx6、预览xlsx7、预览csv 1、入口文件preview/index.vue 预览样式，如pdf 文件目录如图所示： 代码如下 <template><div class"preview-wrap" ref&…...

编程日记 2025/5/31 4:12:12

（八）机器学习 - 线性回归

线性回归（Linear Regression）是一种统计学方法，用于建立一个或多个自变量（解释变量）与因变量（响应变量）之间的线性关系。线性回归的目的是通过最小化预测误差来找到最佳的线性拟合模型&#xff…...

编程日记 2025/6/20 2:28:17

Springboot 整合 Java DL4J 打造金融风险评估系统

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/literature?__c=1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编程，高并发设计，Springboot和微服务，熟悉Linux，ESXI虚拟化以及云原生Docker和K8s…...

编程日记 2025/6/22 5:22:52

CSDN博客：如何使用Python的`datasets`库转换音频采样率

CSDN博客：如何使用Python的datasets库转换音频采样率什么是采样率？代码用途：调整音频数据的采样率完整代码示例代码详解运行结果（示例）总结在这篇文章中，我们将学习如何使用Python的datasets库对音频数据…...

编程日记 2025/5/30 10:29:17

geoserver(1) 发布sql 图层支持自定义参数

前提使用postgis 数据库支持关联 join 支持 in,not in,like,及其他sql原生函数新增sql图层编写自定义sql 编辑sql语句必须输出带有geom数据正则表达式去除设置id以及坐标参考系预览sql图层效果拼接sql参数 http://xxx.com/geoserver/weather/wms?SERVICEWMS&VERSI…...

编程日记 2025/5/31 10:54:07

从 Router 到 Navigation：HarmonyOS 路由框架的全面升级与迁移指南

在本教程中，我们深入探讨了 Router 和 Navigation 在 HarmonyOS 中的用法差异及如何从 Router 切换到 Navigation 的方法。重点涵盖了页面跳转、转场动画、生命周期管理以及跨包路由的实现。页面结构对比 Router 页面结构每个页面需要使用 Entry 注解。页面需要…...

编程日记 2025/6/3 12:56:02

http1.1 vs http2.0 速度对比实测

首先对比一下http1.1 vs http2.0 区别： 1. 连接管理： HTTP/1.1: 每个请求/响应都需要一个独立的 TCP 连接，虽然可以使用持久连接（keep-alive）来复用连接，但仍然存在请求队头阻塞（Head-of-Line…...

编程日记 2025/5/30 8:01:40

uniappp配置导航栏自定义按钮(解决首次加载图标失败问题)

1.引入iconfont的图标，只保留这两个文件 2.App.vue引入到全局中 import "./static/fonts/iconfont.css"3.pages.json中配置text为图标对应的unicode {"path": "pages/invite/invite","style": {"h5": {"…...

编程日记 2025/6/22 7:14:47

vue运行项目时local有显示但是network却显示unavailable

问题描述日常开发中和后端本地调试时后端需要使用你的本地去访问页面可运行项目时会出现network显示unavailable的情况解决方式 1.其实这只是vue脚手架对于ip地址获取的方式兼容上有一些问题但其实是不影响ip访问本地的你可以直接cmd内ipconfig去查看自己的ip然后…...

编程日记 2025/6/3 19:07:23

【Java学习笔记】JUnit

一、为什么需要 JUnit 二、基本介绍三、实现方法第一次添加： 在需要测试的方法处输入 Test注解，快捷键AltInsert选择添加版本（常用JUnit5.4） 出现绿色箭头可进行测试和编译...

编程日记 2025/6/2 7:14:34

Next.js配置教程：构建自定义服务器

更多有关Next.js教程，请查阅： 【目录】Next.js 独立开发系列教程-CSDN博客目录前言 1. 什么是自定义服务器？ 2. 配置自定义服务器 2.1 基础配置 2.2 集成不同的服务器框架使用Fastify 使用Koa 3. 自定义服务器的高级功能 3.1 路…...

编程日记 2025/5/30 16:59:26

el-table 动态计算合并行

原始表格及代码 <el-table:data"tableData"class"myTable"header-row-class-name"tableHead" ><el-table-column prop"date" label"日期"> </el-table-column><el-table-column prop"name" …...

编程日记 2025/6/21 7:16:54

相关文章：