uniapp map上markers图标的大小设置

最新推荐文章于 2024-07-23 16:15:31 发布
最新推荐文章于 2024-07-23 16:15:31 发布
阅读量2.5k 收藏 2
点赞数 11
CC 4.0 BY-SA版权
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/DDZYW/article/details/134519006
文章讲述了在小程序上通过markers设置图标大小的差异，以及在app上调整图片尺寸的需求。作者提问如何在uniapp小程序中使用高德地图并保持一致性，寻求相关经验分享。

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

在小程序上，markers可以通过markers里的width和height（字符串、数字类型都可）设置图标大小。如：图片设置的是30

但是在app上，这两个设置了是不起效果的，只能去调整图片的大小，起初我的图片原本大小是40，但是在app上实在太小了，就把图片尺寸设置成了80，大小才差不多合适。如：

自己做个记录，免得以后会忘！！！！！

顺便结尾，我有个问题想向大家请教，就是现在uniapp 小程序如果要用高德的地图作为展示，要怎么做？虽然说api都是用的高德的，不会有地图不一样导致的经纬度差异，但是还是想问一下，怎样才能在小程序上也用高德地图作为展示呢？如果有哪位做过请留言一下，感谢！！！

uniapp中使用高德地图，进行marker标点，点信息展示，支持app端
liuwenjie_的博客
05-10 1万+
uniapp、uniapp使用高德地图，app开发，安卓开发使用地图、高德地图、renderJs、地图标点、地图点信息展示、数据交互
uniapp 微信小程序 map marker图标不显示，点击图标进行切换，动态设置scale，ios图标不显示的处理，根据地图缩放层级展示不同数据
qq_66991255的博客
08-23 1500
uniapp 微信小程序 map marker图标不显示，点击图标进行切换，动态设置scale，ios图标不显示的处理，根据地图缩放层级展示不同数据
uniapp苹果端map缩放时markers不会自适应
qq_48555398的博客
10-21 771
我们在uniapp中使用map组件时，markers在ios端缩小很大比例时会发现没有自适应，比如我们定位到北京，缩小很大比例后可能markers都到北冰洋了。 解决:我们只需在marker对象中加上以下代码方可解决。 anchor: { x: 0.5, y: 0.5 }
解决uni-app map地图显示图标markers问题（初学记录）
m0_74265954的博客
05-14 2652
在uni-app中引入地图需要提前在腾讯地图或者高德地图申请API，网上有很多教程官网给出的效果：然而我按照官网的步骤写了之后只有地图没有图标没改之前的代码：（我这里的经纬度是从云端传过来的）
uni.createMapContext uniapp小程序 地图放大图标 动态切换图标
qq_47247479的博客
09-26 1828
uni.createMapContext uniapp小程序 地图放大图标 动态切换图标
高德地图 自定义点标记(marker) 图标大小
sunlizhen的专栏
02-11 2万+
<!doctype html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport&quot
uniapp map组件的markers，polyline使用及问题
m0_67401606的博客
03-08 1926
最近在做巡检任务功能，需要在安卓端记录当前巡检轨迹，以及原本的路线显示，由于是使用uniapp框架开发的，所以这里我使用的是uniapp里的map组件。 参考官方文档：https://uniapp.dcloud.io/component/map?id=map 注意：地图组件用于展示地图，而定位API只是获取坐标，请勿混淆两者。 一、获取当前位置: type:默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 的坐标，app平台高德SDK仅支持返回gc
UNIAPP地图markers的坑
qq_40249515的博客
07-13 4754
文章目录UNIAPP的坑1.地图总结 UNIAPP的坑 1.地图 接口调用的markers push之后要重新给个变量才行。 代码如下： points(){ let newmarker =[]; var id=1; uni.request({ url: 'http://xxxx:xxxx/xxx/xxx/xxx', method: 'GET', success: (res) => { res.data.datas.forEach(item=&g
uniapp中map组件动态加载marks标记
球球不吃虾WHR2349博客
04-20 3434
之前在uniapp项目中用到地图都是用h5的方式实现的，比如用高德地图webapi可以不收uniapp的限制，uniapp中vue页面中map组件功能太少，nvue中css写的有蛋疼。 言归正传，marks动态变化了，要给marks重新赋值，只改里面的某一个点某一属性是没用的。具体也没看源码，就不深究原因了。 xuandClickhandler(index) { // this.show = false; this.active = index; this.lists = this.
uniapp 小程序 地图中心点设置标注点(图片)
树上骑个猴的博客
11-19 3791
<map id="myMap" class="myMap" scale="{{scale}}" min-scale="8" longitude="{{longitude}}" latitude="{{latitude}}" show-location="true" bindregionchange="regionDidChange"> <!-- map content --> <cover-image class="manpCenter" src="/im.
uniapp地图手动控制地图scale
why404
11-16 2044
uniapp地图手动控制地图scale
微信小程序-如何根据缩放屏幕大小自适应icon图标更改marker
Bartender_VA11的博客
11-26 3467
微信小程序如何根据用户的缩放屏幕来改变marker图标icon的大小，实现icon自适应屏幕缩放的效果
使用uniapp 原生＜map＞组件 问题汇总
ikedaelaiza的博客
01-12 2587
polyline中的点位若有连续重复点位时this.mapContext.translateMarker在移动到相应位置时会直接结束方法
uniapp 使用map组件 动态自定义标记点图标及内容文字
明耀的博客
07-26 1万+
先看效果 地图中的标记点 可以动态变化自定义的图片与内容 原理 通过map组件中的 markers 属性 设置标记点 用于在地图上显示标记的位置 map组件所在uniapp官网位置：map-uni-app https://uniapp.dcloud.io/componen...
uniapp 地图组件（map）的使用总结
热门推荐
m0_56344602的博客
03-21 3万+
这段时间在开发uniapp的时候使用到map组件 总结一下本次在uniapp中使用map遇到的一些问题 文章分别是基础 定位图标获取自身经纬度 通过经纬度获取当时城市信息
uni-app：tabBar上文字及icon图片尺寸的修改
m0_66923502的博客
11-30 2117
uni-app：tabBar上文字及icon图片尺寸的修改
uniapp实现轨迹polyline和标记点markers最终实现效果
RemindingMe的博客
04-12 6900
uniapp使用map实现显示轨迹和自定义标记内容。
uniapp map组件自定义markers标记点
qq_44161722的博客
07-23 2785
需求是根据后端返回数据在地图上显示标记点，并且根据数据状态控制标记点颜色，标记点背景通过两张图片实现控制。
uniapp 之 将marker 渲染在地图上 点击弹层文字时显示当前信息
HQ\(^o^)/的博客
04-19 4412
而 mapList 里面的 stationId 为 字符串 类型 ，因此这要做个类型转换，若不转换的话，点击所有的 气泡，卡片上面的内容 是显示一样的。因为我这数据是用分页处理 若是 使用index，会有重复的id，会导致在缩放地图时 有些 marker 消失，this.getStationList() 这个请求先执行，后打印经纬度，这时请求里的经纬度 就为空，是我封装的组件， v-if=“tag” 默认不显示，当我点击气泡时出现的 卡片信息。，这个文件帮我们把用户的经纬度存储起来了，我们只需 取就行。
uniapp在地图上标点随着地图缩放
最新发布
04-03
<think>好的，我需要帮助用户解决在UniApp中实现地图标记点随缩放调整的问题。首先，用户提到了地图标记点的自适应调整，这通常涉及到根据地图的缩放级别动态改变标记的大小或样式。结合用户提供的引用内容，特别是引用[3]中的代码示例，里面有使用circles和scale属性，这可能与动态调整有关。 首先，我应该回顾UniApp的地图组件文档，确认有哪些属性和事件可用。地图组件通常有scale属性控制缩放级别，而markers数组定义标记点。用户希望标记点随缩放调整，可能需要监听地图的缩放变化事件，然后更新markers的样式，比如图标大小。 引用[2]提到微信小程序的map组件使用scale参数，并且可以通过regionchange事件监听地图区域变化。在UniApp中，类似的事件可能是regionchange，当用户缩放或拖动地图时触发。所以需要在页面中监听这个事件，并在回调函数中获取当前的缩放级别。 接下来，如何根据缩放级别调整标记点的大小？每个标记的iconPath可以设置不同的图标，或者调整iconSize。例如，当scale较大时（即放得较大），可能需要显示更大的图标，反之则缩小。因此，需要动态计算每个标记的iconSize，可能根据scale的值进行比例调整。 引用[3]中的示例使用了circles的radius，这可能与圆形覆盖物有关，但用户的问题是关于标记点（markers）。不过，其处理缩放的方式可能有参考价值，比如通过setData更新circles的radius。类似地，可以更新markers的iconSize。 可能的实现步骤包括： 1. 在地图组件中绑定regionchange事件。 2. 在事件处理函数中获取当前的scale值。 3. 根据scale计算需要的图标大小。 4. 更新markers数组中的iconSize属性，并触发视图更新。 需要注意的是，频繁更新markers可能会导致性能问题，所以可能需要适当的节流处理，或者只在缩放结束时触发更新（根据regionchange的type判断是begin还是end）。 另外，引用[1]提到视野自适应的实现，这可能包括计算所有标记点的范围并调整scale和中心点。虽然用户的问题不是视野自适应，但相关的坐标计算可能有帮助，比如确保在缩放时标记点保持在合适的位置。 最后，可能需要测试不同的缩放级别对图标大小的影响，调整计算方式，使视觉效果更自然。同时，确保在不同平台（如微信小程序）上的兼容性，因为UniApp需要编译到不同平台，某些API或行为可能有所差异。</think>在UniApp中实现地图标记点随缩放动态调整，需结合地图组件的事件监听与数据响应机制。以下是具体实现步骤： --- ### 一、基础实现原理 1. **监听地图缩放事件** 使用`@regionchange`事件捕获地图视野变化，通过回调参数判断是否为缩放操作[^3]。 2. **动态计算标记点尺寸** 根据当前缩放级别（`scale`值）按比例调整标记点图标大小（`iconSize`）。 3. **响应式更新数据** 修改`markers`数组中的`iconSize`属性，触发视图重新渲染。 --- ### 二、代码实现示例 ```html <template> <map id="mapId" :markers="markers" :scale="currentScale" @regionchange="handleRegionChange" show-scale ></map> </template> <script> export default { data() { return { currentScale: 16, // 初始缩放级别 originalIconSize: 20, // 基准图标大小（scale=16时的尺寸） markers: [{ id: 1, latitude: 39.909, longitude: 116.39742, iconPath: '/static/marker.png', iconSize: [20, 20] // 初始大小 }] }; }, methods: { handleRegionChange(e) { if (e.type === 'end') { // 仅处理缩放结束事件 const mapContext = uni.createMapContext('mapId', this); mapContext.getScale({ success: (res) => { this.currentScale = res.scale; this.updateMarkersSize(); } }); } }, updateMarkersSize() { // 根据缩放级别计算新尺寸（示例公式，可调整） const newSize = this.originalIconSize * (this.currentScale / 16); this.markers = this.markers.map(marker => ({ ...marker, iconSize: [newSize, newSize] })); } } }; </script> ``` --- ### 三、关键优化点 1. **节流控制** 在`handleRegionChange`中添加防抖/节流逻辑，避免频繁触发更新： ```javascript import { throttle } from 'lodash'; methods: { handleRegionChange: throttle(function(e) { /* ... */ }, 500) } ``` 2. **非线性缩放公式** 使用对数函数优化尺寸计算，避免极端缩放级别下图标过大/过小： ```javascript const newSize = this.originalIconSize * Math.log2(this.currentScale + 1); ``` 3. **多级图标策略** 预定义不同缩放级别对应的图标（更精细控制）： ```javascript const iconLevels = [ { scale: 10, size: 10 }, { scale: 15, size: 20 }, { scale: 20, size: 30 } ]; ``` --- ### 四、注意事项 1. **平台差异** iOS与Android对`scale`值的解释可能不同，需真机测试校准公式参数[^2]。 2. **性能优化** 标记点数量较多时，建议使用`wx.createSelectorQuery`替代`createMapContext`获取缩放级别。 3. **视觉连续性** 添加CSS过渡效果使图标大小变化更平滑： ```css map { transition: transform 0.3s ease; } ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值