一个简单的微信小程序地图效果

已于 2023-04-13 10:25:04 修改
阅读量324 收藏
点赞数 2
分类专栏： 微信小程序 文章标签： ui 编辑器
于 2023-04-13 10:13:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76625070/article/details/130123383
版权

用到的插件 Lin Ui  官网:

快速开始 | Lin UI

 安装 Lin Ui 插件:

npm install lin-ui

然后小程序里构建: 

 

 然后找到组件,我们今天要做的是地图效果:

 也可以根据需求选择颜色和大小;

 然后在app.json里加入一条

 效果:

在小程序WXML:

 

在小程序JS里加入:

 

 

 然后就可以点击:

最后呈现的效果如下: 

小小小小小菜鸟~
关注
专栏目录
微信小程序开发：深入实现地图导航功能【含代码示例】
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-04 4444
微信小程序作为一种轻量级的应用程序，凭借其无需安装、即用即走的特点，迅速在移动应用市场中占据了一席之地。其中，地图导航功能作为许多小程序不可或缺的一部分，对于提升用户体验、增加用户粘性具有重要意义。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。为了实现导航功能，我们需要在地图上添加起点、终点等标记点，并绘制导航路线。一个做过前端开发的产品经理🧑，经历过睿智产品的折磨导致脱发之后👴，励志要翻身"农奴"把歌唱，然后，在需要使用地图的页面的。
微信小程序怎样在地图上投射不规则图形和圆形的方法
小码的博客
04-24 435
这其中有2篇文章讲解打卡功能，在地图上投射电子围栏或者范围，以不规则图形或圆形等，然后计算距离，超出范围不能打卡。这期讲解，在微信小程序中，怎样在地图上投射不规则图形和圆形的方法。geojson工具，很好用，可以手动可视化的在地图上画图形，并生成对应的geojson。
微信小程序 地图定位（截图+源码）
05-11
微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地图定位（截图+源码）微信小程序 地
想用微信小程序制作地图标识，需要哪些基础知识？？
weixin_43347065的博客
10-06 717
主要实现功能是对本地地图（图片格式）的缩放、搜索位置、标识文本，不需要导航和定位功能。
告别选择困难！这款免费小程序《数字转盘》助你轻松决策
最新发布
m0_65311870的博客
09-25 890
每次使用《数字转盘》时，它都会自动记录你的抽取结果，所有决策都能随时查看，特别适合那些需要对决策过程进行记录和追踪的场合。功能，通过它，你可以生成任何范围内的随机数字，应用在工作中的各种场景，如随机测试、数据生成等，减少人为决策带来的偏差。对于开发者来说，这种灵活的自定义功能可以很好地适应各种场景，不仅限于吃饭、出行，还能用于团队讨论中的方案选择。在技术团队中，常常需要进行一些随机选择，比如随机分配任务或抽签决定某个项目的负责人。无论是日常生活中的琐碎选择，还是工作中的随机决策，《数字转盘》都能轻松搞定。
微信小程序如何在地图上面操作样式
秋水浮萍任飘渺
08-10 1779
最近在做的一个小程序项目，基于小程序原生地图组件开发。当点击markers的时候，会在地图上方出现一些样式。遇到的问题大概是 map 组件是由客户端创建的原生组件，它的层级是最高的。想绕过是不可能的了，因为有的项目已经实现，大概是这个效果（红色圈着的部分）尝试了各种不可能之后，只能选择跟map同样为层级最高的canvas实现，先上实现后的效果嗯，差不多是自己想要的效果了，现在来给大家分享一下实现方式
微信小程序- 实现地图轨迹移动效果
10-27
微信小程序是一款能够开发出各种功能的便捷工具，其中内置的地图组件，为我们提供了强大的地图展示和交互的能力，为我们的开发节约了不少时间和精力。同时，利用微信小程序内置的定时器，我们也能够简单地实现经纬度...
微信小程序地图的实现
小牧在一直在学习,在前进的道路上大家一起学习，进步。
05-05 1338
实现效果图 不过我换是推荐看下官方文档,记得一定要看,很多属性要了解 实现代码: wxml <view class="page-body"> <map id="map" style="width:100%; height:{{Height}}px" scale='16' latitude="{{latit...
微信小程序地图实现展示线路
10-15
最后，要实现完整的微信小程序地图展示线路功能，除了上述技术点外，还需要考虑到小程序的性能优化、错误处理、安全性等方面。例如，合理地初始化地图数据和按需加载资源可以减少小程序的初始化时间和提高运行效率，...
微信小程序地图
12-22
微信小程序地图定位dome，主要包含已有的一些接口使用说明
微信小程序地图导航功能实现完整源代码附效果图（推荐）
10-17
总结来说，实现微信小程序地图导航功能的关键步骤包括： 1. 引入地图插件并配置。 2. 在WXML中添加`map`组件并设置属性。 3. 绑定点击事件，处理导航请求。 4. 获取后端API提供的经纬度数据。 5. 使用`wx.openMap` ...
小程序实现地图定位和拉起外部地图软件进行导航等功能实现
黑玫瑰
07-01 3013
一、使用小程序内置方法拉起微信内置地图
如何在微信小程序中使用echarts绘制地图（微信小程序制作疫情数据地图）
从入门到放弃
02-24 4318
如上图所示的地图怎么样去制作呢？我们现在开始 首先我们先去把该需要的组件文件下载下来ec-canvas下载 以及maoData.json数据下载出来 放到我们的程序目录下 并将mapData.js也放到文件目录中。 放好之后呢我们需要把ec-canvas引入到我们的页面 index/index.json { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } } 接下来wxml页面里写入组...
微信小程序--放入个性化手绘地图具体步骤（腾讯地图）
热门推荐
heavenz19的博客
07-12 1万+
1.首先需要一个腾讯地图的账号（微信登录即可），然后选择个性化地图进入（https://lbs.qq.com/customMap/添加链接描述），随后选择开启个性化图层按钮进入图层设计。 2.一般来说会有专业的UI设计来完成地图的绘画，之后会给到前端一张图片，这个时候前端可以点击‘切片创建图层’的按钮进行创建图层。 3.开始进行图片和地图坐标合并，点击新建，进入设计页面。搜索需要绘图的具体位置，进行图片的上传，通过一定的拉伸等操作使图片的坐标和地图的坐标尽量重合。设置适当的层级即可点击生成瓦片的按钮。
微信小程序：使用个性化地图
Crazy_GirlLL的博客
12-24 2029
先去腾讯位置服务，根据他下面的流程一个个来 我这是个人注册 第一步：申请密钥：按照和要求填，不报错就行，然后提交 下面的如果是个人用户，按照下面勾选就行，企业用户勾选别的可能会上传资质之类的，然后点击保存，稍等一会 然后到了开发者验证的页面 填写姓名，手机号，邮箱，填完之后，会给你邮箱发验证信息，点进去微信一扫，就可以了，后续如果想改信息，可以在下图所示位置修改即可 至于第一张图片中的第三步：下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1
微信小程序画地块（微信开放文档中腾讯地图）
常年被追砍的博客
11-24 2845
微信小程序画地块（微信开放文档中腾讯地图） 1、map.js // 引入math计算包 var mathjs = require('../../../source/util/math.js'); // 获取所有经纬度 var allarea = [] // 画地块多边形 var temp = [] // 查看是否可以绘制地图 var check = 0 // 设置标点次数 var marker = 0 // 定义两个接收参数变量经纬度，计算前一个点到下一个点的距离 var lat = 0;..
微信小程序：实现canvas绘制地图及简单拖动
03-17
在微信小程序中，Canvas是一个非常重要的组件，它允许开发者在界面上进行图形绘制，从而实现各种复杂的交互效果。本篇文章将聚焦于如何利用Canvas在微信小程序中绘制地图，并实现简单的拖动功能。以下是对这个主题的...
微信小程序地图画区域 和计算区域面积
weixin_43594281的博客
09-13 1266
微信小程序地图画区域 和计算区域面积。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值