地图自定义弹窗 高德地图信息窗体 鼠标点击地图点标记显示弹窗vue
这个例子是使用高德地图官网自定义信息窗体,非vue-amap封装的高德地图组件
vue使用:
HTML使用:
结果如下图所示:
具体实现代码为下:
1.在public的index.html中引入css和js
//key值不需要加引号
2.构建自定义组件
class="custom-info input-card content-window-card">{{devInfo.title}} 状态:{{devInfo.state}}
style="background-color: white;">src="img/dev.png"> href="https://ditu.amap.com/detail/B000A8URXB?citycode=110105">XXXXXXXXXXXX
地址:{{devInfo.address}}
总用电:{{devInfo.electricity}}总用气:{{devInfo.gas}}
发酵罐:{{devInfo.guan}}总用水量:{{devInfo.water}}
工作年限:{{devInfo.years}}总产量:{{devInfo.total}}
建厂时间:{{devInfo.time}}建筑面积:{{devInfo.mianji}}style="position: relative; top: 0px; margin: 0px auto;">
3.将创建好的组件引入到自己需要展示的地方即可。