小程序 地图 参数配置

已于 2025-04-26 22:31:50 修改
阅读量2.7k 收藏 1
点赞数 1
分类专栏： 校园导航小程序 文章标签： 微信小程序 小程序 前端 javascript
于 2023-05-15 21:31:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45940369/article/details/130693234
版权

有很多小伙伴问我，地图的 中心点坐标、地图边界坐标、自定义图层坐标，以及某个具体地点的坐标，这些参数该如何配置？

然后我就简单弄了Demo，希望能够解决大伙的问题

目录

教程演示（看完文章还不会的，看这个）

小程序 地图 参数设置及预览

0. 下载并导入项目

将 桂院校园导航小程序仓库 中的 “地图参数获取工具” 文件夹 导入进小程序

1. 写入初始参数

坐标拾取器大概取个点，填入地图中心点坐标

坐标拾取器

在这里插入图片描述

2. 打开控制台

打开调试器 - console

在这里插入图片描述

3. 缩放和拖动到合适位置

初始调整方式：滑动鼠标滚轮，调至大致范围

微调方式：

  • 笔记本电脑：用触控板双指缩放会方便一点

  • 台式电脑：点击“+”或“-”按钮进行微调

在这里插入图片描述

4 调整各项参数

将控制台的数据填入对应位置

4.1 地图中心点坐标、缩放级别、最小缩放级别

在这里插入图片描述

4.2 地图边界

在这里插入图片描述

4.3 学校范围

点击地图会当前点击地点的坐标，以此来确定和填入学校的东、南、西、北 坐标

在这里插入图片描述

2.2版本（改为地图多边形）：
点击地图会显示当前点击地点，不断增加直至贴合学校区域

初次进入时先 ”清除全部点面“
点错了可以 ”清除上一个点“
”显示/隐藏 标记点“ 查看效果

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4.4 地点坐标（静态项目）

点击地图的某处，将其地点坐标复制粘贴进 静态项目 的 某个地点的坐标
在这里插入图片描述

4.5 自定义图层（校园地图）边界坐标

要获取的是 西南角 和 东北角 的坐标，比较麻烦。我是借助 ps 大致实现的

坐标拾取截图，同时将自定义图层 导入ps中

调整自定义图层的 透明度 、 大小 和 位置 ，使其尽量贴合 地图

大致记一下 左下角和右上角位置，在坐标拾取器中 大致选点，获取的坐标填入即可

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4.6. 地图多边形（2.1及以后版本的项目）

有的网友并没有校园地图，但也想在地图上显示出校园的范围，可以使用地图多边形。
在这里插入图片描述
操作也很简单

  1. 进入“地图多边形”页面，清除全部点面
  2. 然后开始在地图上点
  3. 如果点错了，可以点击清除上一个点
  4. 完成后点击生成数据
  5. 将数据复制到“校园导航小程序”项目
    在这里插入图片描述
  6. 取消js的注释
    在这里插入图片描述

5. 后续操作

将数据粘贴并覆盖 校园导航小程序项目 map.js 的对应数据

小程序——地图
qq_39201210的博客
03-28 686
地图 首先要下载qqmap-wx-jssdk.min.js key去腾讯地图api里自己申请呀 在需要地图页面js中引入 // 引入SDK核心类 import QQMapWX from '../../utils/qqmap-wx-jssdk.min.js'; // 实例化API核心类 let qqMap = new QQMapWX({ key: 'C2FBZ-6YMKX-ML...
微信小程序自带地图_微信小程序之map地图
weixin_39856589的博客
01-12 743
微信小程序地图操作比较简单，api也很少，使用map组件来展示。说到地图，那就先来看基础定位：定位用到wx.getLocation(OBJECT)函数，代码如下：wx.getLocation({type: 'wgs84',success: function(res) {var latitude = res.latitudevar longitude = res.longitudevar speed...
小程序 地图功能
Acitylion的博客
06-23 516
参考官方文档示例代码： wx.getLocation({ type: 'wgs84', success: function(res) { var latitude = res.latitude var longitude = res.longitude var speed = res.speed var accuracy = res.accuracy ...
微信小程序地图map全方位解析
最新发布
x15514104477的博客
02-20 2714
本文全方位解析了微信小程序的 <map> 组件，涵盖基础功能、地图交互、事件绑定、动态操作、地图服务API、地图插件以及高德地图集成等内容，并提供了详细代码示例和注意事项，助力开发者实现丰富地图功能。
微信小程序之地图
青烟小生的博客
07-19 7055
微信小程序之地图 简介 ​ 腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持，使得开发者可以自由地实现自己的微信小程序产品。 在此基础上，腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包，可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务，让您的小程序更强大！ 操作： 申请开发者密钥（key）：申请密钥 开通webse
微信小程序地图
qq_52788454的博客
12-09 798
使用map和wx.openLocation在小程序中构建内置地图
微信小程序·简单MAP地图
HUSBANDL的博客
07-03 705
到此，简单版微信小程序地图已完成。
微信小程序地图导航功能实现完整源代码附效果图（推荐）
10-17
总结来说，实现微信小程序地图导航功能的关键步骤包括： 1. 引入地图插件并配置。 2. 在WXML中添加`map`组件并设置属性。 3. 绑定点击事件，处理导航请求。 4. 获取后端API提供的经纬度数据。 5. 使用`wx.openMap` ...
微信小程序腾讯地图资源包
12-20
在使用微信小程序腾讯地图资源包时，开发者需要先在腾讯地图开放平台上注册并申请key，然后在小程序的app.js文件中引入qqmap-wx-jssdk.js或qqmap-wx-jssdk.min.js，并配置相应的key。接着，在需要使用地图功能的页面...
微信小程序开发之map地图组件定位并手动修改位置偏差
10-16
由于微信小程序对用户定位信息的访问权限有所限制，如果要获取用户的位置信息，必须在小程序的JSON配置文件中声明相应的权限。此外，为了保证用户的位置信息安全，开发者在开发定位相关的功能时，应该遵循微信官方...
微信小程序基于高德地图查找位置并显示文字
10-16
在微信小程序开发中，有时我们需要集成地图功能，例如利用高德地图API来查找位置并显示相关的文字信息。本文将详细讲解如何实现这一功能。 首先，要实现基于经纬度在地图上查找定位，我们需要引入高德地图的小程序...
微信小程序地图Demo
10-07
微信小程序地图Demo,帮助您更好的学习微信小程序，希望对你学习小程序起到作用
小程序地图api详解
10-24
小程序中地图API使用的视频教学，有详细的介绍，希望对你有帮助
腾讯地图小程序服务器配置,腾讯地图实现微信小程序地图定位教程
weixin_39915694的博客
08-12 1602
前言目前腾讯位置服务提供路线规划、地图选点、地铁图、城市选择器插件四款插件产品，本篇博客主要针对地图选点功能进行实现。开通腾讯位置服务2、登录进入小程序后台，选择 “开发 - 开发工具 - 腾讯位置服务”image.png3、点击 “开通”，进入授权扫码界面image.png4、使用微信扫码进行授权image.png5、绑定开发者账号image.png接入插件1、在小程序后台，选择 “设置 - 第...
微信小程序：地图导航
小码的博客
07-16 699
调用内联地图 wxml： <button bindtap="daohang">地图导航</button> js：放入page中 daohang: function () { wx.getLocation({//获取当前经纬度 type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS...
微信小程序——地图（定位，多个标记点）
热门推荐
wy313622821的博客
11-25 1万+
地图（定位，多个标记点） 效果图： . . . 使用的是微信自带的腾讯地图， 使用起来方便，简单，代码也很好理解 喜欢的朋友请收藏 . . . . . . .js代码： Page({ data: { longitude: 113.14278, //地图界面中心的经度 latitude: 23.02882, //地图界面中心的纬度 markers: [ //标志点的位置 //位置0 { id: 0, iconPath: ".
微信小程序引入地图
m0_73481765的博客
09-06 1642
其中，type参数表示返回的坐标类型，可选值为’wgs84’（GPS坐标）和’gcj02’（国测局坐标），默认为’wgs84’。在success回调函数中，可以获取到latitude（纬度）和longitude（经度）两个属性，可以根据需要进行进一步的处理。如果微信小程序中要获取当前地理位置，可以使用微信小程序的API接口 wx.getLocation()。2.可以通过scale改变地图缩放级别和longitude和latitude属性设置地图中心的经纬度。3.可以通过markers属性设置地图标点。
微信小程序-地图类应用
fuyboy的专栏
10-15 6106
这段时间由于公司的要求将我们APP做了一个微信小程序的版本出来，也是自己对微信小程序好奇，就接下来了，按照流程先看微信小程序API文档，然后申请小程序，一系列配置（这里就不介绍了，文档里都写的很清楚），然后确定功能，出UI原型图，开工写代码，单元测试，整个花了2个周的时间； 废话了一堆，这里主要介绍下微信小程序map的使用，先来一张效果图： 这里贴下主要代码介绍下： 先是wxml文件：<m
小程序如何使用地图
xiaoyuehan007的专栏
11-15 1699
随着网络越来越发达，地图在这其中扮演着重要的角色，今天我们就来谈谈如何在小程序中使用地图，首先我们看看效果图：       说明一下，默认显示第一张图，然后点搜索会跳转到第二张图片。下面进入正题： JS文件如下 const amapFile = require('../../utils/amap-wx.js'); //地图文件，在我的QQ群里有下载（731568857） Page({ ...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值