_Nora_
_Nora_
  • 发布:2022-07-25 19:40
  • 更新:2022-08-01 19:40
  • 阅读:778

APP端的map组件是否支持customCallout?

分类:uni-app
map

在map组件文档中,下图可以看到说不支持

同一篇文档,下图看起来又是支持的

我的问题:安卓和ios端是否支持高德地图marker的customCallout?如果支持,如何使用?

2022-07-25 19:40 负责人:无 分享
已邀请:
DCloud_uniAD_HDX

DCloud_uniAD_HDX

nvue map支持,已更新文档

  • _Nora_ (作者)

    谢谢,已看到文档更新。不过只说了nvue支持,未说明如何使用。


    2022-07-26 23:23

DCloud_uniAD_HDX

DCloud_uniAD_HDX

参考代码,后续补充文档

<template>  
  <view class="content">  
    <map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"  
      :latitude="location.latitude" :show-location="showLocation" :rotate="rotate" :skew="skew" show-scale="true"  
      :markers="markers" enable-building=true enable-indoorMap="true" @callouttap="oncallouttap">  
      <cover-view slot="callout">  
        <cover-view marker-id="1">  
          <cover-image class="icon" src="/static/logo.png"></cover-image>  
          <cover-view class="test">  
            customCallout  
          </cover-view>  
        </cover-view>  
      </cover-view>  
    </map>  
  </view>  
</template>  
  
<script>  
  const testMarkers = [{  
    id: 1,  
    latitude: 39.9086920000,  
    longitude: 116.3974770000,  
    title: '天安门',  
    zIndex: '1',  
    iconPath: '/static/gif.gif',  
    width: 40,  
    height: 40,  
    anchor: {  
      x: 0.5,  
      y: 1  
    },  
    callout: {  
      content: '首都北京\n天安门',  
      color: '#00BFFF',  
      fontSize: 12,  
      borderRadius: 2,  
      borderWidth: 0,  
      borderColor: '#333300',  
      bgColor: '#CCFF11',  
      padding: '1',  
      display: 'ALWAYS'  
    },  
    customCallout: {  
      anchorY: 0,  
      anchorX: 0,  
      display: 'ALWAYS'  
    }  
  }];  
  
  module.exports = {  
    data() {  
      return {  
        location: {  
          longitude: 116.3974770000,  
          latitude: 39.9086920000  
        },  
        controls: [{  
          id: 1,  
          position: {  
            left: 5,  
            top: 180,  
            width: 30,  
            height: 30  
          },  
          iconPath: '/static/logo.png',  
          clickable: true  
        }],  
        showLocation: false,  
        scale: 13,  
        enableZoom: true,  
        polyline: [],  
        markers: testMarkers,  
        polygons: [],  
        circles: [],  
        includePoints: [],  
        rotate: 0,  
        skew: 0  
      }  
    },  
    methods: {  
      oncallouttap(e) {  
        uni.showModal({  
          content: JSON.stringify(e)  
        })  
      }  
    }  
  }  
</script>  
  
<style>  
  .content {  
    flex: 1;  
  }  
  
  .map {  
    width: 750rpx;  
    height: 250px;  
    background-color: #f0f0f0;  
  }  
  
  .icon {  
    width: 20px;  
    height: 20px;  
  }  
  
  .scrollview {  
    flex: 1;  
    padding: 10px;  
  }  
  
  .list-item {  
    flex-direction: row;  
    flex-wrap: nowrap;  
    align-items: center;  
    padding: 5px 0px;  
  }  
  
  .list-text {  
    flex: 1;  
  }  
  
  .button {  
    margin-top: 5px;  
    margin-bottom: 5px;  
  }  
</style>  

  • _Nora_ (作者)

    你好,麻烦看一下这个问题呢https://ask.dcloud.net.cn/question/152878,是使用你给的示例代码来测试的


    2022-09-07 19:54

  • 1***@qq.com

    点击自定义气泡的时候标记点会显示在自定义气泡层级之上,麻烦看一下是bug还是什么,小程序没有出现这个问题


    2022-09-15 17:03

要回复问题请先登录注册