高德地图自定义点标记大小_Vue:如何在地图上添加自定义覆盖物(点)

阅读: 评论:0

⾼德地图⾃定义点标记⼤⼩_Vue:如何在地图上添加⾃定义
覆盖物(点)
此⽂重点是在地图上标点,所以就省去引⼊百度地图的步骤了。
旅行攻略模板先给⼀下最终的效果。
这个效果主要是利⽤百度地图的“覆盖物”来实现的。
由于我做的这个要求显⽰不同的颜⾊来代表不同的所属者,所以就做的⿇烦⼀点。
如果你的需求不要求特别显⽰,那么可以使⽤bm-marker
丹东住宿哪里便宜代码⼤致如下:
上⾯的代码中position⾥⾯的值是经纬度。有了经纬度来能够标上点。
ak是你申请的百度api的key
center是城市中⼼
为什么烈士陵园不闹鬼
如果你希望使⽤特别的图标来给标上全部点,那么也可以使⽤bm-marker,它⾥⾯有⼀个icon属性,icon⾥⾯的图⽚可以⽤来标点:icon中的url是图⽚的url路径。
如果你想要显⽰多种覆盖物,那么你可以使⽤overlay。(要封装,因为封装之后才能传值进去指定显⽰什么覆盖物)
南昌海洋公园
简单的overlay是这样⼦的:
为什么可以基于这个组件来封装是因为这个组件有以下⼏个好处:
1. 可以定制⽂本内容
2. 它本⾝是⼀个元素,⽽不是⼀个图⽚,(上⾯的“打点物”都是图⽚(⼩红点不确定是不是,可能是⼀个字体图标的东西)),因为是元
青岛值得去的地方深圳世界之窗门票价目表素,所以我们能够使⽤border,background,color等等样式来处理这个元素。
需求实现步骤:
1.定义⼀个MyOverLay:
2.使⽤MyOverLay,传给它需要的值:
my-overlay v-for="item in 省略" :key="item.省略" :position="{lng: item.longitude, lat: item.latitude}" :text="item.省略" :color='省略(这⾥可以处理⼀下从⽽给每⼀个组件

本文发布于:2023-08-11 02:58:07,感谢您对本站的认可!

本文链接:http://www.035400.com/whly/3/575423.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:地图   百度   封装   图标   覆盖物
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2024-2030 Comsenz Inc.Powered by © 文化旅游网 滇ICP备2022007236号-403 联系QQ:1103060800网站地图