search

yangyanggu / vue-amap

高德地图封装 for vue2 vue3.0
https://vue-amap.guyixi.cn/
MIT License
252 stars 13 forks source link

el-amap-elastic-marker中的styles > label.content失去响应 #69

Open codingtalk opened 7 months ago

codingtalk commented 7 months ago

使用版本

请填写使用版本：2.0.24 vue:3.3.9

问题描述

使用el-amap-elastic-marker组件，传递属性:styles="item.styles"， 如果直接改变数组里面的的label.content内容，地图内容不更新 convertedPoints[i].styles[0].label.content = eleToMount.innerHTML

codingtalk commented 7 months ago

在playground也可以复现 https://amap-run.guyixi.cn/#eyJzcmMvQXBwLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPGRpdiBjbGFzcz1cIm1hcC1wYWdlLWNvbnRhaW5lclwiPlxuICAgIDxlbC1hbWFwXG4gICAgICA6Y2VudGVyPVwiY2VudGVyXCJcbiAgICAgIDp6b29tPVwiem9vbVwiXG4gICAgPlxuICAgICAgPGVsLWFtYXAtZWxhc3RpYy1tYXJrZXJcbiAgICAgICAgOnBvc2l0aW9uPVwiY29tcG9uZW50TWFya2VyLnBvc2l0aW9uXCJcbiAgICAgICAgdGl0bGU9XCLmoIflj7dcIlxuICAgICAgICA6dmlzaWJsZT1cImNvbXBvbmVudE1hcmtlci52aXNpYmxlXCJcbiAgICAgICAgOmRyYWdnYWJsZT1cImNvbXBvbmVudE1hcmtlci5kcmFnZ2FibGVcIlxuICAgICAgICA6em9vbS1zdHlsZS1tYXBwaW5nPVwiY29tcG9uZW50TWFya2VyLnpvb21TdHlsZU1hcHBpbmdcIlxuICAgICAgICA6c3R5bGVzPVwiY29tcG9uZW50TWFya2VyLnN0eWxlc1wiXG4gICAgICAgIEBpbml0PVwibWFya2VySW5pdFwiXG4gICAgICAgIEBjbGljaz1cImNsaWNrTWFya2VyXCJcbiAgICAgIC8+XG4gICAgPC9lbC1hbWFwPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInRvb2xiYXJcIj5cbiAgICA8YnV0dG9uIEBjbGljaz1cImNoYW5nZVZpc2libGUoKVwiPlxuICAgICAge3sgY29tcG9uZW50TWFya2VyLnZpc2libGU/ICfpmpDol48nIDogJ+aYvuekuicgfX1cbiAgICA8L2J1dHRvbj5cbiAgICA8YnV0dG9uIEBjbGljaz1cImNoYW5nZURyYWdnYWJsZVwiPlxuICAgICAge3sgY29tcG9uZW50TWFya2VyLmRyYWdnYWJsZSA/ICfnpoHmraLmoIforrDnp7vliqgnIDogJ+WFgeiuuOagh+iusOenu+WKqCcgfX1cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IGxhbmc9XCJ0c1wiIHNldHVwPlxuaW1wb3J0IHtyZWYsIG9uTW91bnRlZH0gZnJvbSBcInZ1ZVwiO1xuaW1wb3J0IHtFbEFtYXAsIEVsQW1hcEVsYXN0aWNNYXJrZXJ9IGZyb20gXCJAdnVlbWFwL3Z1ZS1hbWFwXCI7XG5cbmNvbnN0IHpvb20gPSByZWYoMTYpO1xuY29uc3QgY2VudGVyID0gcmVmKFsxMTYuNDEyODY2LCAzOS44ODM2NV0pO1xuXG5jb25zdCBkcmFnZ2FibGUgPSByZWYoZmFsc2UpO1xuXG5jb25zdCBjb21wb25lbnRNYXJrZXIgPSByZWYoe1xuICBwb3NpdGlvbjogWzExNi40MTI4NjYsIDM5Ljg4MzY1XSxcbiAgdmlzaWJsZTogdHJ1ZSxcbiAgZHJhZ2dhYmxlOiBmYWxzZSxcbiAgem9vbVN0eWxlTWFwcGluZzogIHtcbiAgICAxNDogMCxcbiAgICAxNTogMCxcbiAgICAxNjogMSxcbiAgICAxNzogMSxcbiAgICAxODogMSxcbiAgICAxOTogMSxcbiAgICAyMDogMVxuICB9LFxuICBzdHlsZXM6IFt7XG4gICAgaWNvbjoge1xuICAgICAgaW1nOiAnaHR0cHM6Ly9hLmFtYXAuY29tL2pzYXBpX2RlbW9zL3N0YXRpYy9yZXNvdXJjZS9pbWcv5pWF5a6rLnBuZycsXG4gICAgICBzaXplOiBbMTYsIDE2XSwvL+WPr+ingeWMuuWfn+eahOWkp+Wwj1xuICAgICAgYW5jaG9yOiAnYm90dG9tLWNlbnRlcicsLy/plJrngrlcbiAgICAgIGZpdFpvb206IDE0LC8v5pyA5ZCI6YCC55qE57qn5YirXG4gICAgICBzY2FsZUZhY3RvcjogMiwvL+WcsOWbvuaUvuWkp+S4gOe6p+eahOe8qeaUvuavlOS+i+ezu+aVsFxuICAgICAgbWF4U2NhbGU6IDIsLy/mnIDlpKfmlL7lpKfmr5TkvotcbiAgICAgIG1pblNjYWxlOiAxLy/mnIDlsI/mlL7lpKfmr5TkvotcbiAgICB9LFxuICAgIGxhYmVsOiB7XG4gICAgICBjb250ZW50OiAn56WI5bm05q6/JyxcbiAgICAgIHBvc2l0aW9uOiAnQk0nLFxuICAgICAgbWluWm9vbTogMTVcbiAgICB9XG4gIH0se1xuICAgIGljb246IHtcbiAgICAgIGltZzogJ2h0dHBzOi8vYS5hbWFwLmNvbS9qc2FwaV9kZW1vcy9zdGF0aWMvcmVzb3VyY2UvaW1nL3FpbmlhbmRpYW4ucG5nJyxcbiAgICAgIHNpemU6IFsxMjgsIDE2MF0sXG4gICAgICBhbmNob3I6ICdib3R0b20tY2VudGVyJyxcbiAgICAgIGZpdFpvb206IDE3LjUsXG4gICAgICBzY2FsZUZhY3RvcjogMixcbiAgICAgIG1heFNjYWxlOiAyLFxuICAgICAgbWluU2NhbGU6IDAuMTI1XG4gICAgfSxcbiAgICBsYWJlbDoge1xuICAgICAgY29udGVudDogJ+eliOW5tOauvycsXG4gICAgICBwb3NpdGlvbjogJ0JNJ1xuICAgIH1cbiAgfV0sXG59KTtcbmNvbnN0IGNoYW5nZVZpc2libGUgPSAoKSA9PiB7XG4gIGNvbXBvbmVudE1hcmtlci52YWx1ZS52aXNpYmxlID0gIWNvbXBvbmVudE1hcmtlci52YWx1ZS52aXNpYmxlO1xufVxuXG5jb25zdCBjbGlja01hcCA9IChlOiBhbnkpID0+IHtcbiAgY29uc29sZS5sb2coJ2NsaWNrIG1hcDogJywgZSk7XG59XG5jb25zdCBpbml0TWFwID0gKG1hcDogYW55KSA9PiB7XG4gIGNvbnNvbGUubG9nKCdpbml0IG1hcDogJywgbWFwKTtcbn1cblxuY29uc3QgY2hhbmdlRHJhZ2dhYmxlID0gKCkgPT4ge1xuICBjb21wb25lbnRNYXJrZXIudmFsdWUuZHJhZ2dhYmxlID0gIWNvbXBvbmVudE1hcmtlci52YWx1ZS5kcmFnZ2FibGU7XG59XG5jb25zdCBjbGlja01hcmtlciA9ICgpID0+IHtcbiAgYWxlcnQoJ+eCueWHu+S6huagh+WPtycpO1xufVxuXG5jb25zdCBtYXJrZXJJbml0ID0gKGUpID0+IHtcbiAgY29uc29sZS5sb2coJ21hcmtlciBpbml0OiAnLCBlKTtcbn1cblxub25Nb3VudGVkKCgpID0+IHtcbiAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgY29tcG9uZW50TWFya2VyLnZhbHVlLnN0eWxlc1swXS5sYWJlbC5jb250ZW50ID0gJ3Rlc3QnXG4gICAgY29tcG9uZW50TWFya2VyLnZhbHVlLnN0eWxlc1sxXS5sYWJlbC5jb250ZW50ID0gJ3Rlc3QnXG4gIH0sIDMwMDApXG59KVxuXG48L3NjcmlwdD5cblxuPHN0eWxlPlxuPC9zdHlsZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiQHZ1ZW1hcC92dWUtYW1hcC9nbG9iYWwuZC50c1wiLFwiQHZ1ZW1hcC92dWUtYW1hcC1sb2NhL2dsb2JhbC5kLnRzXCIsXCJAdnVlbWFwL3Z1ZS1hbWFwLWV4dHJhL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcImluY2x1ZGVcIjogW1widHlwaW5ncy8qKi8qXCJdLFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsInR5cGluZ3MvZ2xiYWwuZC50cyI6ImRlY2xhcmUgY29uc3QgQU1hcDogYW55XG5kZWNsYXJlIGNvbnN0IExvY2E6IGFueVxuIiwiX28iOnt9fQ==

yangyanggu commented 7 months ago

我确认了下，这个是文档有错误，高德官方styles字段不支持修改，所以这个属于静态属性

codingtalk commented 7 months ago

我确认了下，这个是文档有错误，高德官方styles字段不支持修改，所以这个属于静态属性

这个我记得之前的版本是可以的，项目正常更新，最近因为我升级了版本（vue, @vuemap/vue-amap），就不行

yangyanggu commented 7 months ago

https://lbs.amap.com/api/javascript-api-v2/documentation#elasticmarker 你可以看下高德文档，组件库内部对属性的set方法处理是直接识别高德对象的，如果有对应的set方法会自动增加watch进行处理，目前高德文档里就不存在修改styles的能力

codingtalk commented 7 months ago

https://lbs.amap.com/api/javascript-api-v2/documentation#marker setLabel这个方法是不是可以避免重新绘制marker的前提下更新content? -- thanks for your contribution to the opensource 👍

yangyanggu commented 7 months ago

你如果使用el-amap-marker的话可以直接 slot的方式去处理，slot走的是vue的渲染模式，性能肯定更好一些

codingtalk commented 7 months ago

ok, 我试试这个组件， 谢谢