高德地图渲染多点位并且点击出现提示框

最新推荐文章于 2024-09-02 16:55:33 发布

_潮汐海灵_

最新推荐文章于 2024-09-02 16:55:33 发布

阅读量1k

点赞数

分类专栏：高德地图文章标签： vue

本文链接：https://blog.csdn.net/weixin_45669668/article/details/110479466

版权

本文介绍了如何使用Vue结合高德地图API，在地图上渲染多个点位，并实现点击点位时弹出提示框的功能。通过创建子组件和父组件的交互，实现了地图上的动态点位展示和交互效果。

摘要由CSDN通过智能技术生成

参考内容
子组件代码

<template>
  <div id="info">
    <div style="text-align: center;">
      <h4>详 情</h4>
    </div>
    <p>省市: {
  {baseInfo.province}} {
  {baseInfo.city}}</p>
    <p>地址: {
  {baseInfo.address}}</p>
    <p>时间 : {
  {baseInfo.createdtime}}</p>
    <div class="amap-info-sharp">
      <i class="el-icon-caret-bottom"></i>
    </div>
  </div>
</template>

<script>
export default {
    
  props: {
    
    baseInfo: {
    
      type: Object,
      default: {
    }
    },
    data () {
    
      return {
    
        overlay: null,
        infoWindow: