本文示例参照官方文档自定义信息窗口
效果:
安装依赖
npm i vue-amap
- index.html添加
<script src="//webapi.amap.com/maps?v=2.0&key=自己注册的KEY"></script>
<!--引入UI组件库(1.1版本) -->
<script src="//webapi.amap.com/ui/1.1/main.js"></script>
HTML部分
<div id="container"></div>
JS部分
- 监听事件的时候用的大写Event,官方示例是小写的
AMap.Event.addListener(marker, 'click', function () {
_this.infoWindow.open(this.map, marker.getPosition())
})
- 关闭信息窗体时,官方用的
map.clearInfoWindow()
(map的方法),但是关闭一次后,再次关闭会失效,就换成infoWindow.close()
(窗体的方法)
完整部分
<script>
import {
reactive, ref } from