微信小程序---高德地图API

article/2025/10/21 0:30:28
本文章介绍微信小程序调用高德地图API的过程,使用高德定位功能做演示。

微信小程序目前支持百度地图、高德地图、腾讯地图。用法可以说是基本完全一样,本文章以高德为例,简单说一下他们的区别,高德地图精度应该是最准确的,毕竟本来就是做地图出生的。百度地图的精度目前较高德而言,还是要稍稍欠缺一点,但是他的附近商家那些要比高德好一点。而关于腾讯地图,暂时来说还是只能表示呵呵,希望越来越好吧。
1.既然本章是介绍微信小程序如何使用高德地图API,那么第一件事肯定是进入高德地图开放平台(https://lbs.amap.com/)。此处需要注册,登录。
2.完成登陆后,进入控制台,在左边侧边栏里点击 应用管理->我的应用-> 创建新应用,会生成一个key,这个key在后面将会用到。记住绑定服务选择 微信小程序
3.登录微信开发者平台,在服务器域名设置里将高德地图的域名设置好
在这里插入图片描述
4.在你的项目中新建一个目录libs,将amap-wx.js文件放入此目录里(amap-wx.js下载地址:https://lbs.amap.com/api/wx/download,解压出来会有两个文件,此处只需要一个),结果如下:
在这里插入图片描述
5.在libs目录下创建配置文件config.js,写入第二步获取的key,例如
在这里插入图片描述

高德api配置到这儿就结束了,以下是我调用高德实现定位的demo

JS部分:

var amapFile = require('../../libs/amap-wx.js');  //引入高德js
var config = require('../../libs/config.js');      //引用我们的配置文件
Page({data: {markers: [],latitude: '',longitude: '',textData: {}},onLoad: function () {var that = this;var key = config.Config.key;var myAmapFun = new amapFile.AMapWX({ key: key });myAmapFun.getRegeo({iconPath: "../../img/marker.png",iconWidth: 22,iconHeight: 32,success: function (data) {console.log(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) {// wx.showModal({title:info.errMsg})}})}
})

WXML部分:

<view class="map_container"><map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}"></map>  
</view>
<view class="map_text"><text class="h1">{{textData.name}}</text><text>{{textData.desc}}</text>
</view>

WXSS部分:

.map_container{position: absolute;top: 0;bottom: 80px;left: 0;right: 0;
}
.map{width: 100%;height: 100%;
}
.map_text{position: absolute;left: 0;right: 0;bottom: 0px;height: 80px;background: #fff;padding: 0 15px;
}
text{margin: 5px 0;display: block;font-size:12px;
}
.h1{margin: 15px 0;font-size:15px;
}

此页面大概长这样:
在这里插入图片描述

PS:
高德地图官方开发指南地址 https://lbs.amap.com/api/wx/guide/create-project/config-project
我的小程序demo地址 https://github.com/Yxiaogg/vioShop(star star star


http://chatgpt.dhexx.cn/article/AVip63Dv.shtml

相关文章

微信小程序地图控件Map的使用

本文介绍微信小程序map控件的使用 map为原生控件之一…… 介绍完map控件之后下面直接来看代码怎么实现吧 和往常一样&#xff0c;这些代码贴过去就可以直接通用的 首先wxml文件(极简)&#xff1a; <map id"map" scale"16" controls"{{controls}}&…

微信小程序地图导航实例讲解

微信小程序地图导航实例讲解 先上演示视频准备工作如下在app.json中添加 watch页面代码watch.wxmlwatch.wxsswatch.js connect导航页面使用在腾讯位置服务需要获取key地图选点当用户未点击选址时&#xff0c;默认传入用户当前地址&#xff0c;可以在onShow方法中定义 代码解读 …

微信小程序——地图(定位,多个标记点)

效果图 指定为位置 Page({data: {longitude: 113.14278, //地图界面中心的经度latitude: 23.02882, //地图界面中心的纬度markers: [ //标志点的位置//位置0{id: 0,iconPath: "../images/1.png",latitude: 23.04308268848755,longitude: 113.13562655285273,width: …

Poi读取Excel时的日期操作(原创)

在java读取excel获取数据存入数据库时&#xff0c;经常会遇到多种日期类型和时间类型混用的情况 比如这样&#xff0c;一边是纯日期&#xff0c;一边是“年月日 时分秒”形式&#xff0c; 很多时候我们需要直接根据内容来区分二者&#xff0c;从而将取到的时间值转换成与excel…

Java用poi实现读取Excel文件内容

使用poi读取Excel文件 前言 用户可以直接读取本地文件&#xff0c;也可以通过上传文件的形式读取excel 注意&#xff1a;poi对于读取到空白行的时候&#xff0c;会默认的认为是最后一行&#xff0c;将不会再读取空白行下面的数据 第一步 导入依赖 <dependency><gro…

使用poi读取Excel中的数据到数据库

大家好今儿给大家带来的是使用poi读取Excel中的数据到数据库 目录 大家好今儿给大家带来的是使用poi读取Excel中的数据到数据库1.poi简单介绍2.poi操作excel3.代码部分(可直接用)4.测试5.总结 1.poi简单介绍 POI是Apache出品的一个开源的专门用来操作我们Microsoft Office格式…

POI读取Excel浅谈

POI读取Excel浅谈 博客分类&#xff1a; J2EEJava开源Servlet/Jsp设计模式 Excel Ruby Office Apache Microsoft 先看代码&#xff0c;挨句解释&#xff1a; 一般遍历使用两种方式&#xff0c;1&#xff1a;得到总的行数和每行的列数&#xff0c;然后循环。2&#xff1a;使用…

【Java】POI读取Excel的两种模式

用户模式 基本使用 usermodel相关包&#xff0c;对用户友好&#xff0c;在ss包下有统一的接口&#xff0c;但它是把整个文件读取到内存中&#xff0c;对于大量数据很容易内存溢出&#xff0c;所以只能用来处理小量数据 示例代码 public static List<Map<String, Stri…

使用POI读取EXCEL中的所有Sheet表

使用POI读取EXCEL中的所有Sheet表 最近接触到了多sheet页的导入导出功能&#xff0c;现举例如何 使用POI&#xff0c;通过多个循环读取EXCEL中的所有Sheet表内容。 package poitest; import java.io.File; import java.io.FileInputStream; import org.apache.poi.hssf.u…

poi读取Excel文档(.xls .xlsx)包含合并单元格

例子&#xff1a; 结果&#xff1a; 开始&#xff1a;----------------------------------- 导入的poi <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --><dependency><groupId>org.apache.poi</groupId><artifactId>poi</ar…

Java教程:使用POI读取excel文档(根据BV1bJ411G7Aw整理)

Java教程&#xff1a;使用POI读取excel文档&#xff08;根据BV1bJ411G7Aw整理&#xff09; 最近公司需要我做一个导出Excel表格的功能&#xff0c;为此来学习一下POI&#xff0c;在这里记录一下学习笔记。B站直接搜BV1bJ411G7Aw就能找到视频。 一、简介 poi如何操作表格 二…

poi读取excel模板,并填充数据

一、POI介绍 Apache POI是Apache软件基金会的开放源码函式库&#xff0c;POI提供API给Java程序对Microsoft Office格式档案读和写的功能。 基本功能&#xff1a; HSSF &#xff0d; 提供读写Microsoft Excel格式档案的功能。 XSSF &#xff0d; 提供读写Microsoft Excel OOXM…

java使用poi操作读取Excel文件

在上代码之前首先说说Excel文件的一些名词 工作区workbook&#xff1a;可以理解为一个Excel文件&#xff0c;比如LinkL.xlsx文件 表sheet&#xff1a;一个.xlsx文件中的不同表 行row&#xff1a;表中的一行数据 单元格cell&#xff1a;每一行中的每一个数据就是单元格 附&…

使用Java通过POI读取EXCEL中的数据

这里有个Excel&#xff0c;怎么使用java读取excel中的数据呢&#xff1f; 文件存放位置&#xff1a; 首先引入poi的jar包 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.17</version></…

使用POI读取excel文件内容

1.前言 项目中要求读取excel文件内容&#xff0c;并将其转化为xml格式。常见读取excel文档一般使用POI和JExcelAPI这两个工具。这里我们介绍使用POI实现读取excel文档。 2.代码实例&#xff1a; package edu.sjtu.erplab.poi;import java.io.FileInputStream;import java.io.Fi…

使用POI读取Excel文件

使用POI读取Excel文件 一、前言 用户可以通过上传excel文件&#xff0c;后端通过读取excel文件的内容并将内容写入数据库中以便更好的使用。 本文档使用的excel的工具类既可以读取有合并单元格的文件也可以读取没有合并单元格的文件&#xff0c;并且读取到单元格的数据进行了…

POI读写Excel的基本使用

一、Excel导入导出的应用场景 1、数据导入&#xff1a;减轻录入工作量 2、数据导出&#xff1a;统计信息归档 3、数据传输&#xff1a;异构系统之间数据传输 二、POI简介&#xff08;Apache POI&#xff09; 1、什么是POI Apache POI是Apache软件基金会的开放源码函式库&…

C# 加载DotNetBar组件

C#作为前端的开发软件&#xff0c;使用的人很多&#xff0c;但是原生的C#界面较为简陋&#xff0c;已经不能满足公司级的开发工作了&#xff0c;今天这篇博客的主要内容是讲一下怎么在C#端使用一个可以提升界面美感的第三方控件&#xff0c;DotNetBar 首先去官网下载最新的DotN…

DevComponents.DotNetBar2 美化包使用以及验证教程

使用这个美化包是在别人项目上看到的&#xff0c;遇到一些懵逼问题&#xff0c;不断总结&#xff0c;所以写一下教程 DotNetBar 美化包控件不可编辑问题&#xff1a; 如图&#xff1a; 解决办法&#xff1a; 安装DotNetBar 这个软件&#xff08;有试用版&#xff09;&#xff…

winform DevComponents.DotNetBar2 添加到工具栏方法

当C#项目引入皮肤组件&#xff0c;或其他组件是&#xff0c;发现工具框里面没有引用的组件怎么办&#xff1f; 1.组件的引用 我是把下载好的*.dll组件&#xff0c;复制到项目的\bin\Debug\路径下&#xff0c;然后在项目处右键-->添加引用&#xff0c;这样组件就引入项目了…