Vue中集成高德地图API实现定位与自定义样式信息窗体

263 篇文章 13 订阅 ¥9.90 ¥99.00
118 篇文章 14 订阅

场景

若依前后端分离版手把手教你本地搭建环境并运行项目:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

在上面将前后端项目搭建起来后,要集成高德地图实现地图显示与定位功能的实现。

 

然后在地图的基础上实现根据坐标进行定位并自定义信息窗体,实现效果如下

 

然后关掉窗体还可以实现定位标记的图片

 

注:

博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

登录高德开放平台,然后新建应用<

  • 4
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在使用高德地图APIVue3实现自定义弹窗样式时,可以参考以下步骤: 1. 首先,初始化地图弹窗实例,并设置isCustom为true,表示使用自定义窗体。可以使用AMap.InfoWindow类来创建地图弹窗实例,并设置偏移量等属性。\[1\] 2. 在处理地图标记物点击事件时,可以通过获取点击的标记物对象,设置动画效果,并获取相应的内容。可以使用AMap.InfoWindow的setContent方法设置弹窗内容,然后使用open方法打开弹窗。\[1\] 3. 可以参考高德地图官方提供的demo样式,该demo展示了自定义弹窗的样式。可以在官方demo查看代码和样式,以便参考和使用。\[2\] 4. 高德地图官网还提供了自定义弹窗内容的例子,使用了Dom操作的方式来实现。可以使用Vue的全局APIVue.extend方法来创建一个Vue子类构造器,然后通过实例化该构造器来创建一个Vue对象,类似于Dom的DocumentFragment接口。这样可以使用Vue的方式来实现自定义弹窗的Dom操作。\[3\] 综上所述,你可以使用高德地图APIVue3来实现自定义弹窗样式。可以参考高德地图官方提供的demo和文档,根据自己的需求进行相应的代码编写和样式设计。 #### 引用[.reference_title] - *1* *3* [高德地图自定义弹窗内容](https://blog.csdn.net/fredricen/article/details/106172766)[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^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [VUE 高德自定义弹窗样式不生效?(AMap.InfoWindow弹窗样式问题)](https://blog.csdn.net/weixin_39921970/article/details/120744647)[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^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

霸道流氓气质

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

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

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

打赏作者

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

抵扣说明:

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

余额充值