uniapp 微信小程序地图map组件样式自定义

已于 2023-08-06 17:27:14 修改
阅读量1.4k 收藏 3
点赞数
文章标签： 微信小程序 uni-app javascript
于 2023-06-08 14:27:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Hia_amlx/article/details/131106968
版权
本文介绍了如何在微信小程序中配置腾讯位置服务的JavaScriptSDK，包括创建应用、选择个性化地图样式以及获取和使用key来实现自定义功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.第一步

进入 微信小程序JavaScript SDK | 腾讯位置服务

2. 进入应用管理 》 我的应用 》 右上角 创建应用 

3.创建完应用，进入下面的个性化地图  >  样式选择 (如图) 

4.现在获取到key 和 自定义的样式

设置成功演示图

uniapp小程序map（点击地图增加maker，聚合、自定义聚合样式）
_小郑有点困了的博客
12-28 3824
小程序端开发地图组件，点击地图上任何一个位置，增加一个maker，点击maker触发另外的事件。
微信小程序自定义map组件标记点markers（兼容苹果和安卓）
竹叶轻拂水
05-11 1万+
先来看实现效果图（uniapp实现，代码在下面） 在图片中我们看到标记点有以下需求： 1、标记点是自定义的，并不是微信默认 2、标记点的自定义icon有四种形式 3、数字是动态的 4、数字颜色有两种形式 1、自定义标记点 2、自定义标记点icon（marker属性下使用） 3、动态数字（marker属性下使用） 数字动态展示使用marker的callout和label都可以，但是在苹果手机不显示label，在安卓手机上callout定位无效，所以在使用的时候用wx.getSystemInfo获取
uni-app 手机App中使用map（高德地图）自定义地图样式
qq_44766377的博客
09-22 2880
首页 | 高德控制台高德开放平台官网控制台提供了高德开发者Key管理，Key可视化分析等功能。创建一个地图。
微信小程序map 之个性化地图（日出日落主题）-----更新
qq_41194534的博客
06-06 1697
Page({/*** 页面的初始数据。
uniapp 自定义地图组件（根据经纬度展示地图地理位置）
最新发布
qq_65142821的博客
03-07 624
template></view><script>},height() {},},},},methods: {// 点击事件});
SimpleMap-WX：微信小程序的自定义地图控件
gitblog_00911的博客
08-18 552
SimpleMap-WX：微信小程序的自定义地图控件 项目地址:https://gitcode.com/gh_mirrors/si/SimpleMap-wx 在微信小程序开发中，地图功能是许多应用不可或缺的一部分。今天，我们要介绍的是一个专为微信小程序设计的自定义地图控件——SimpleMap-WX。这个开源项目不仅提供了丰富的地图功能，还具有高度的可定制性和易用性，非常适合需要在小程序中集成地图...
微信小程序 地图 自定义组件
04-03
小程序 地图 自定义组件 底栏等示例 简单实用 wx-component 微信小程序自定义组件开发
微信小程序 map 自定义地图数据，实现方式+思路+代码（最简易的实现方式）
飞奔的屎壳郎
10-28 7895
先上效果图，总的来说就是在地图上加上自己需要的数据 注意事项： requestSimple是我封装的提交函数，我的其他帖子有。 重点掌握.（重点） 1.官方map组件，提供了自定义标记（markers）的方式。详细去看下文档https://developers.weixin.qq.com/miniprogram/dev/component/map.html 2.一个点就是一个标记，多个点就是 m...
微信小程序之callout自定义气泡
03-29
一脚下去差点没从坑里爬起来，然后由于某个原因，去研究了 微信小程序里面地图 callout 这个属性 callout呢，是在标记的点上面显示 一个 气泡，作为提示用 最后展示下 效果 可以展示 顶部气泡以及监听被点击 (此...
微信小程序 地图map组件 SDK 并 实现导航
成茂峰
08-14 4158
> 主要实现： > 1. 地图上搜索关键字地址 > 2. 对地址设置标记点 > 3. 位置授权被拒后，重新触发授权的处理逻辑 > 4. 实现获取当前位置，计算目标地址与当前位置的距离 > 5. 触发对选中的信息展示弹窗 > 6. 实现开始导航操作 ...
微信小程序地图map使用demoMapDemo-master.zip
09-25
1. **微信小程序地图组件（<map>）**：在微信小程序中，使用`<map>`组件可以嵌入地图到页面中。这个组件支持多种地图模式，如普通地图、卫星地图、交通地图等，并且能够实现缩放、平移、定位等功能。 2. **初始化...
微信小程序基于canvas的自定义地图控件，实现瓦片地图等SimpleMap-wx-master.zip
09-25
微信小程序基于canvas的自定义地图控件，实现瓦片地图等SimpleMap-wx-master.zip
微信小程序设置个性化地图样式
qq_37604998的博客
05-22 2921
在开发地图时，我们想要改变地图的样式进行自定义，那么我们就需要使用腾讯地图提供的个性化地图，在其官网上提供了一些可以直接使用的模板，下面我们大概说下引用的流程： 1、进入腾讯地图开发者中心控制台，然后点击 我的样式，选择对应模板进行直接使用，然后选择想要引用的小程序 2、如下我们进入样式应用列表中，能够看到样式已经和当前小程序的秘钥key绑定在一起了，这里我们要记住秘钥key值和样式的编号，Style1 澹月 的编号为1 3、下面使我们小程序引用地图组件，然后我们将上面的值设置下下面两个.
uniapp 使用map组件 动态自定义标记点图标及内容文字
热门推荐
明耀的博客
07-26 1万+
先看效果 地图中的标记点 可以动态变化自定义的图片与内容 原理 通过map组件中的 markers 属性 设置标记点 用于在地图上显示标记的位置 map组件所在uniapp官网位置：map-uni-app https://uniapp.dcloud.io/componen...
【小程序】微信小程序使用个性化地图
LuviaWu的博客
04-24 1731
看开发指南：按照12345点来操作 开发指南-入门 2、创建应用和key 小程序位置服务 - 我的应用 选样式地图，绑定创建的key，会带出该小程序信息，保存即可。 设置完后就可以使用了！ key是腾讯地图key。 layer-style属性设置为该key绑定个性化样式的style编号（1,2,3），即可生效 如上图style 1为微信深色样式，那么将layer-style赋值为1。 <map id="map" subkey="{{key}}" longitude="116.273
uni-app小程序打开地图选取自定义地址
烈阳，
07-28 3524
一、看下效果图 二、在页面写上地图标签 <map style="width: 100%;height: 97%;" id="myMap" :markers="markers" :longitude="longitude" :latitude="latitude" scale='16' @markertap="handleStore"></map> markers：存放地图上面的地址标签数组对象 longitude、latitude：当前定位的经度、纬度 scale：地图缩放比例
uniapp 地图聚合自定义样式
weixin_51800296的博客
05-07 2216
解决uniapp地图聚合无法自定义样式的问题
uniapp在引用百度地图实现自定义省市区海量点
weixin_52830464的博客
06-05 956
​vue在手机端端引用百度地图实现自定义省、市、区、项目、设备海量点，根据地图的zoomLevel设置成4-6级是省级别、7-9级是市级别、10-12级是区级别、13和14级是项目级别、15级-15级以上是设备级别。省、市、区、项目的数据，对象的字段是: name、value、latitude、longitude、id。设备的数据，对象的字段是: name、value、latitude、longitude、deviceid。2.可自行设置个性化样式模板-下图使用的是"眼眸"
uniapp在app端自定义地图样式
牵着蜗牛去旅行的博客
08-17 1467
<map layer-style="c29e758aea2d2a1873049aeb81dab986"> </map> 中间这行字符串是在高德地图上获取自定义地图的样式id
uniapp微信小程序地图的通过经纬度展示网格
12-06
在 UniApp 中，如果你想要通过经纬度在微信小程序的地图上展示网格，首先需要确保已经引入了微信提供的地图组件，并且配置了相应的权限。以下是一个基本步骤： 1. **引入地图组件**： 在你的页面文件（如 `map.vue`）里，导入微信小程序的 Map 组件： ```html <template> <view> <map : latitude="currentLocation.latitude" :longitude="currentLocation.longitude"></map> </view> </template> <script setup> import { map, wxMapInstance } from '@vant/weapp/map'; // 初始化地图实例 const initMap = async () => { await wxMapInstance.create({ latitude: currentLocation.latitude, longitude: currentLocation.longitude, zoom: 15, // 设置初始缩放级别 enableHighAccuracy: true, // 是否使用高精度定位，默认true }); }; // 获取用户位置 const getLocation = async () => { const position = await wx.getLocation({ type: 'gcj02', // 使用百度坐标系 success: (res) => { currentLocation = res; initMap(); } }); }; const currentLocation = {}; // 初始化位置信息 onMounted(async () => { await getLocation(); }); </script> ``` 2. **设置网格**： 微信小程序地图本身并不直接提供显示网格的功能，你需要借助第三方库或者自定义标记点来模拟网格效果。你可以计算出经纬度范围内的等间距点，并在其上添加标记。例如，你可以每隔一定经度和纬度画一条线。 3. **自定义标记点**： 在地图上添加一系列经纬度作为标记点（Marker），然后用样式区分网格线和标记点。这通常涉及到JavaScript操作地图API，动态添加和删除标记。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安陌乐轩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值