百度小程序不支持customCallout

Question

使用uniapp开发百度小程序想在地图上自定义气泡框 百度小程序有不支持customCallout怎么解

Answer 1

引自免费微信小程序：皆我百晓生

在百度小程序中，目前确实不支持customCallout属性来自定义气泡样式。不过，可以通过一些变通的方式来实现类似的效果。以下是一种可能的解决方案：

1. 自定义弹出视图
   • 在地图上添加marker点时，可以不使用默认的气泡框，而是监听marker的tap事件，在事件触发时手动展示一个自定义的弹出视图（uni-app中的view组件）。

// 百度地图API加载完成后
map.plugin('AMap.Marker', function() {
  var marker = new AMap.Marker({
    position: [116.39,39.9],
    clickable: true // 开启点击事件
  });

  map.add(marker);

  // 监听marker点击事件
  marker.on('click', function(e) {
    // 显示自定义的气泡视图
    uni.createSelectorQuery().select('#customCallout').boundingClientRect(function(rect) {
      if (rect) {
        // 这里假设你已经在页面上创建了一个id为'customCallout'的自定义视图
        // 并根据marker的位置动态调整其位置以模拟callout效果
        this.customCalloutView.style.display = 'block';
        this.customCalloutView.style.left = /* 计算left值 */;
        this.customCalloutView.style.top = /* 计算top值 */;
      }
    }).exec();
  });
});

1. 模拟气泡框样式
   • 在你的uni-app页面的template部分，创建一个自定义的view作为模拟的气泡框，并设置相应的CSS样式使其看起来像默认的气泡框。

<template>
  <view id="customCallout" class="custom-callout" style="display:none;">
    <!-- 气泡内容 -->
    <view class="content">
      自定义内容
    </view>
    <!-- 指向标记点的小三角形 -->
    <view class="arrow"></view>
  </view>
  <!-- 地图容器 -->
  <map @ready="onMapReady" :show-location="true"></map>
</template>

1. CSS样式
   • 使用CSS来设计并定位这个自定义气泡框，包括内容区和指向marker的小三角形。

.custom-callout {
  position: absolute;
  width: /* 自定义宽度 */;
  height: /* 自定义高度 */;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: /* 添加阴影效果 */;
}

.content {
  padding: 8px;
}

.arrow {
  /* 根据实际需要，用CSS三角形技巧生成小箭头 */
}

请注意，由于百度小程序的具体API和uni-app框架细节无法在此处完全展示，上述代码仅供参考，具体实现时需要根据实际情况进行调整。同时，为了准确计算自定义气泡框的位置，可能还需要结合marker的实际经纬度、屏幕坐标以及地图的缩放级别等因素进行计算。