<template>  
  <view style="height: 400px;width: 750rpx">  
    <map v-if="markerList && markerList.length" id="uMap" class="uMap" ref="uMap" :scale="scale" :show-location="false" :enable-zoom="true"  
      :enable-scroll="true" :enable-rotate="true" :show-scale="true" :latitude="latitude" :longitude="longitude"  
      :markers="markerList" :include-points="includePoints"  
      style="height: 400px;flex: 1;align-items: stretch;display: flex;width: 750rpx;" @markertap="markerHandler"></map>  
    <button @click="handleScale(20)">放大</button>  
    <button @click="handleScale(3)">缩小</button>  
    <button @click="handleMove">移动到杭州</button>  
  </view>  
</template>  
<script>  
  export default {  
    data() {  
      return {  
        uMap: null,  
        scale: 3,  
        latitude: 30.257576,  
        longitude: 120.172346,  
        markerList: [{  
          "id": 18994,  
          "latitude": 30.66667,  
          "longitude": 104.06667,  
          "callout": {  
            "content": "成都",  
            "borderRadius": 4,  
            "color": "#666666",  
            "padding": 10,  
            "fontSize": 12,  
            "textAlign": "center",  
            "bgColor": "#FFFFFF",  
            "anchorX": 0,  
            "anchorY": 0,  
            "display": "ALWAYS"  
          }  
        }, {  
          "id": 18995,  
          "latitude": 30.257576,  
          "longitude": 120.172346,  
          "callout": {  
            "content": "杭州",  
            "borderRadius": 4,  
            "color": "#666666",  
            "padding": 10,  
            "fontSize": 12,  
            "textAlign": "center",  
            "bgColor": "#FFFFFF",  
            "anchorX": 0,  
            "anchorY": 0,  
            "display": "ALWAYS"  
          }  
        },  {  
          "id": 18998,  
          "latitude": 29.56667,  
          "longitude": 106.45,  
          "callout": {  
            "content": "重庆",  
            "borderRadius": 4,  
            "color": "#666666",  
            "padding": 10,  
            "fontSize": 12,  
            "textAlign": "center",  
            "bgColor": "#FFFFFF",  
            "anchorX": 0,  
            "anchorY": 0,  
            "display": "ALWAYS"  
          }  
        }],  
        includePoints: [{  
          "latitude": 30.66667,  
          "longitude": 104.06667  
        }, {  
          "latitude": 30.257576,  
          "longitude": 120.172346  
        }, {  
          "latitude": 29.56667,  
          "longitude": 106.45  
        }]  
      }  
    },  
    onReady() {  
      this.uMap = uni.createMapContext('uMap', this)  
    },  
    methods: {  
      handleMove() {  
        if (this.uMap) {  
          this.uMap.moveToLocation({  
            latitude: 30.257576,  
            longitude: 120.172346,  
            success: (res) => {  
                console.log('moveto', res)  
            }  
          })  
        }  
      },  
      handleScale(scale) {  
        this.scale = scale  
      }  
    }  
  }  
</script>  
<style>  
</style>  
 
                                        
                                    
                                    - 发布:2022-07-07 16:39
- 更新:2023-07-27 14:54
- 阅读:1157
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: macOS Monterey 12.2
手机系统: Android
手机系统版本号: Android 12
手机厂商: 小米
手机机型: redmi k30s
页面类型: nvue
vue版本: vue2
打包方式: 离线
项目创建方式: CLI
CLI版本号: ^2.0.1-34920220630001
示例代码:
                                    
                                    
                                         
                                
                                                                                                操作步骤:
                                    
                                        1.手动放大地图某个点到不能再放大后,点击按钮移动到某个标记点后该标记点气泡消失,手动缩小后气泡又出现
2.点击放大按钮,点击移动到杭州按钮,杭州标记点气泡消失,点击缩小按钮后气泡又出现
                                     
                                
                                                                                                1.手动放大地图某个点到不能再放大后,点击按钮移动到某个标记点后该标记点气泡消失,手动缩小后气泡又出现
2.点击放大按钮,点击移动到杭州按钮,杭州标记点气泡消失,点击缩小按钮后气泡又出现
预期结果:
                                    
                                    
                                        放大或者缩小地图后气泡都存在
                                     
                                
                                                                                                放大或者缩小地图后气泡都存在
实际结果:
                                    
                                    
                                        放大地图后android气泡消失,缩小地图后又出现,ios正常
                                     
                                
                                                            放大地图后android气泡消失,缩小地图后又出现,ios正常
bug描述:
nvue使用高德地图,放大地图后android 标记点气泡消失,ios正常,缩小后气泡又出现
 
                                                                                                                                                                                                                                                             
                                                                                                                                                                                 
             
             
             
			 
                                                                     
                                                                     
                                                                    