uniapp地图使用nvue时markers只渲染一次，不能动态显示问题

已于 2022-06-29 13:48:17 修改
阅读量3.1k 收藏
点赞数 5
分类专栏： uniapp js vue.js 文章标签： vue js
于 2020-08-12 14:39:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsq199771/article/details/107956980
版权
js 同时被 3 个专栏收录
58 篇文章 0 订阅
订阅专栏
vue.js
48 篇文章 0 订阅
订阅专栏
uniapp
13 篇文章 0 订阅
订阅专栏

因为地图的标点需要后台返回才能获得，但是nvue页面中map组件的markers不支持动态渲染，发送请求后异步操作了。导致数据回来前已经进行一次渲染，markers从视图上不改变，在网上看到了一个思路是在map上面加v-if=‘map’，这样map默认是不渲染，等数据返回后把map设为true，进行第一次渲染。真是巧妙。

试了试发现不行，真不负责这些答主

星陈~
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
demo-map-nvue.zip
12-04
该demo是uniapp混合项目示例，涉及的有子窗体的使用和注意的地方，以及父窗体与子窗体之间的通信。
uniapp-地图-不同端的使用-高德maker问题-经纬度转换详细地址
weixin_45932463的博客
03-28 833
app端地图使用=>高德地图(官方文档推荐使用nvue不使用vue) h5端小程序使用=>腾讯地图 支付宝使用=>高德地图 在manifest.json配置 h5端配置 一定要注意不同端使用不同的地图否则没法渲染 解释一下为啥非要nvue，app端如果使用vue <template> //app的是高德 <map @tap='mapClick'></map> </template> <script> expor
uniapp 微信小程序 map获取接口数据后地图标注marker不会渲染显示
树上骑个猴的博客
02-19 1843
1.先确保marker数据符合要求，比如id、latitude、longitude等字段都有。 2.等页面加载完成后再渲染： const that = this wx.nextTick(() => { that.markers = data uni.hideLoading() }) ↑ 在这里用wx.nextTick代替this.$nextTick。 如果以上办法没用，就只能用setTimeout，且把时间设置长一点，比如4秒 ...
UNIAPP nvue 地图 markers 不显示
weixin_42704663的博客
11-03 4368
小程序转uniapp，地图页面改为nvue页面。业务为请求回来的定位，要替代原来的定位 ，按照下程序的代码走不通。不显示图片 let mark = { iconPath: "/static/common/images/[email protected]", id: 1001, latitude: wgs84togcj02[1], longitude: wgs84togcj02[0], width: 50, height: 50 }; let markers
uniapp地图的marker图标不显示问题
m0_51290484的博客
02-14 1075
uniapp地图的marker图标不显示问题
关于uni-app map渲染问题
xiuxiuDuang的博客
11-02 1026
uniapp 使用map组件 动态自定义图标及文字
最新发布
01-17
<!-- 地图" :titleCenter='true'> ;"> </free-scroll-main> --> ..." :latitude="latitude" :longitude="longitude" :markers="markers" :enable-building='true' :show-location='true' :circles
微信小程序map组件动态markers
03-29
使用wepy框架，请求回来的数据设置给data里面初始化的markers，使用wx：if在拿到数据后渲染map组件，模拟器上没问题，真机上map组件渲染不出来   本主题由 Rolan 于 2018-10-12 14:17 审核通过       (此图片...
react使用高德地图react-amap：Markers、Circle、ContextMenu、自定义ContextMenu
09-29
react使用高德地图react-amap：Map、Markers、Circle、ContextMenu、自定义ContextMenu
easymap简化了使用GoogleMapsAPI渲染一堆markers
08-10
easymap 简化了使用Google Maps API渲染一堆markers
仿共享单车显示地图中心位置附近的markers
10-25
模仿共享单车，显示地图中心附近3公里内的markers，移动地图中心位置（2公里以上），markers时时...使用的是百度地图，如果地图不能正常显示，请更换AndroidManifest.xml中的百度地图密钥。过几天会出个高德地图版。
uni-app开发小程序map组件点击marker事件失败问题，已解决
github_54195343的博客
03-22 4508
uni-app开发小程序，使用map地图组件，点击marker无效，大意是找不到bindmarkertap对应的方法 报错信息：Please make sure that markerTap handler has been defined in components/xxx/xxx. 而，该方法依然存在在methods中！ 解决方案： uni-app开发小程序与小程序官方绑定点击事件不同，需要把bind改成@，如下图 成功！ ...
uni-app开发微信小程序 - 地图，安卓端无法加载出marker标记点
傲娇的晓明
12-29 2952
个人使用uni-app开发的微信小程序 使用map组件时，遇到了安卓和iOS端小程序不兼容的问题 首先，map组件的markers中必须有id字段 其次，向markers中增加字段时，安卓端不支持直接向data中的数据push新增点位 如下代码，在iOS的小程序端没有问题，安卓的小程序端将不渲染markers this.markers.push({ id: 3, latitude: 39.909, longitude: 116.39742, }) 做如下修改 let
【记录4】uniapp Map地图组件 动态渲染markers
Merlin的博客
05-19 5157
使用map组件加载地图后，动态添加标记点 1. 首先在map标签绑定要标记的点 2. 在data里面定义point,地图加载一开始没有标记的画就为空数组 要是一开始需要标记就按以下格式填入数据 points:[{ id:1,//点击事件会调用此id,建议不同点设置不同id title:'兰州',//标记点的名称 latitude:36.061089,//纬度 longitude:103.834303,//经度 iconPath:'/static/ima
uni-app renderjs 使用leaflet示例
weixin_60645637的博客
12-21 1141
在保证已有script下在创建一个新的script标签，标签中定义land=“renderjs” module=“任意名”通过change监听‘msg’的变化来调用视图层的‘receiveMsg’方法，rendererjs是一个运行在视图层的js，只支持app-vue和h5。module相当于id，后面需要通过module属性来调用方法。通过callMethod来调用逻辑层的方法并定义传入的参数。下面是通过renderjs使用leaflet地图示例。renderjs的用处。renderjs用法。
uniapp 踩坑Map组件
m0_67265464的博客
04-27 1256
由于本人不爱看文档 遇到问题先百度的原则，还是踩了不少坑。先简单记载第一步 做出一个如图所示的效果 代码如下： <map style="width: 100%; height:94vh;" :latitude="latitude" :longitude="longitude" :markers="marker" :scale='scale' :controls="controls" :circles="circles" :polyline="polyline"&
uniApp通过JavaScript渲染组件、js、JS、appendChild、removeChild、map、require、extend、mount
“代码农”微信公众号
05-16 1702
uniApp通过javascript渲染组件、js、JS、appendChild、removeChild、map、require、extend、mount
nvue map 高德地图组件升级、离线个性化地图、离线设置样式文件、可使用nvue map 所有功能、免VIP使用个性化地图
杨克进的博客
03-19 343
nvue map 高德地图组件升级、离线个性化地图、离线设置样式文件、可使用nvue map 所有功能、免VIP使用个性化地图
uniapp 使用 nvue 加载map地图
weixin_43073383的博客
08-25 1854
由于uniapp map经纬度再次赋值 地图空白bug 和 普通vue地图不能操作markers label，故临时使用nvue 载入地图，记录一下使用方法。
uniapp地图markers标记点
08-31
在uniapp中，地图组件的markers属性用于在地图上显示标记点。它的类型是一个数组(Array)，每个元素都是一个对象，用于配置每个标记点的属性。 具体来说，可以配置的属性包括markerId、latitude、longitude、title、iconPath、rotate、alpha、width、height等等。其中，markerId表示标记点的唯一标识符，latitude和longitude表示标记点的经纬度，title表示标记点的标题，iconPath表示标记点的图标路径，rotate表示标记点的旋转角度，alpha表示标记点的透明度，width和height表示标记点的宽度和高度等等。 通过配置markers属性，我们可以在地图上添加多个标记点，每个标记点都可以设置不同的属性，以满足各种需求。在uniapp中使用map组件进行地图开发时，可以利用markers属性来实现标记点的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [uni-app使用map组件开发map地图，获取后台返回经纬度进行标点](https://blog.csdn.net/m0_46598549/article/details/124865990)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

星陈~

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

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

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

打赏作者

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

抵扣说明：

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

余额充值