Dafrok
commented
6 years ago 你确定这个不是 JS API 的 featrue？
Closed nickliufc closed 6 years ago
Dafrok
commented
6 years ago 你确定这个不是 JS API 的 featrue？
nickliufc
commented
6 years ago 我从0.20.4的版本依次向低版本逐个安装并验证，在0.20.2版本就不会出现此类问题。
Dafrok
commented
6 years ago 最好提供一个具体的复现用例，一段简单的代码就可以
nickliufc
commented
6 years ago @Dafrok 发了邮件到你o.o@mug.dog邮箱，不知道能否收到，hope it will be helpful
Dafrok
commented
6 years ago 为啥不直接写 issue 里，也好给其他人一个参考
nickliufc
commented
6 years ago 代码不太好抽出来，贴出来也没关系。
<template>
<div>
<Spin v-if="loading" fix></Spin>
<Card :dis-hover="true" :bordered="false" :padding="0" class="card-wrap card-full animated fadeIn">
<baidu-map class="bm-view" ak="TIj3pFan1kg1l7Z9Ib1GuGKGeN6nW1gR" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="mapInit">
<bm-control anchor="BMAP_ANCHOR_TOP_LEFT">
<Cascader :data="branchList" size="large" class="w-xxl box-shadow" placeholder="请选择区域及网点" @on-change="doSearch" filterable></Cascader>
</bm-control>
<!-- 车辆列表 -->
<bm-control v-if="totalRecords > 0" anchor="BMAP_ANCHOR_TOP_LEFT" :class="['panel-vehicles animated fadeIn', expanded == true ? 'expanded':'collapsed']">
<Collapse v-model="collapse" class="collapse-vehicles no-padding w-xxl box-shadow" @on-change="handlePanelCollapse">
<Panel name="1">
<div class="p-x z-i-10">
当前车辆列表<span class="text-muted">（共 </span><span class="text-error">{{currentCarAmount}}</span><span class="text-muted"> 辆车）</span>
</div>
<div slot="content">
<div id="carContainer" class="pos-abt pos-full b-t scrollable scrollbar-xs">
<div v-for="(item, index) in carData" :id="'car-' + item.id" v-if="filterBar.vehicleStatus.indexOf(item.mixStatus) > -1" :key="index" class="collapse-vehicle no-border text-left ivu-collapse b-b">
<div :class="['ivu-collapse-item', currentCollapseIndex == index ? 'ivu-collapse-item-active':'']">
<div :class="['ivu-collapse-header', (windowType == 2 && popInfo.id == item.id && popInfo.show == true) ? 'active':'']">
<i class="ivu-icon ivu-icon-arrow-right-b" @click="handleCollapse(index)"></i>
<div class="cursor-pointer" @click="handleCarClick(item)">
<p>
<span class="text-sm text-black">{{item.platenum | subString(8) | undefinedValue('暂无车牌')}}</span>
<Tag color="red" class="m-l-xs cursor-default" title="充电枪状态"><Icon type="flash" class="m-r-xs"></Icon>{{item.echargeableGunStatus | parsePowerStatus}}</Tag><Tag class="m-l-xs cursor-default" title="车辆状态">{{item.mixStatus | parseCarStatus}}</Tag>
</p>
<p>
<span class="text-muted">续航里程：</span><span class="text-black">{{item.lifeMileage | undefinedValue}}</span><span class="text-muted"> km</span>
<span class="m-l text-muted">剩余电量：</span><span class="text-black">{{item.soc | undefinedValue}} %</span>
</p>
</div>
</div>
<div :class="['ivu-collapse-content', currentCollapseIndex == index ? '':'hide']">
<div class="ivu-collapse-content-box">
<div class="p-x p-y-xs l-h">
<p><span>颜 色：</span><span class="m-l-sm">{{item.color | undefinedValue('暂无')}}</span></p>
<p><span>锁 状 态：</span><span class="m-l-sm">{{item.lockStatus | parseLockStatus}}</span></p>
<p><span>小电池电压：</span><span class="m-l-sm">{{item.batteryVoltage | undefinedValue}} V</span></p>
<p><span>位 置：</span><span class="m-l-sm">{{item.location | undefinedValue('未知')}}</span></p>
<p><span>会 员 姓 名：</span><span class="m-l-sm">{{item.memberName | undefinedValue('暂无')}}</span></p>
<p><span>手 机：</span><span class="m-l-sm">{{item.phoneNo | undefinedValue('暂无')}}</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Panel>
</Collapse>
</bm-control>
<!-- 车桩切换 -->
<bm-control anchor="BMAP_ANCHOR_TOP_RIGHT">
<div class="m-b">
<ButtonGroup class="white r box-shadow" vertical>
<Button type="ghost" :class="['button-icon', filterBar.branchLayer == true ? 'active':'']" @click="branchSwitch">
<img :src="filterBar.branchLayer == true ? layerImgList[1] : layerImgList[0]" class="w-16">
<p class="l-h-1x">网点</p>
</Button>
<Button type="ghost" :class="['button-icon', filterBar.vehicleLayer == true ? 'active':'']" @click="vehicleSwitch">
<img :src="filterBar.vehicleLayer == true ? layerImgList[3] : layerImgList[2]" class="w-16">
<p class="l-h-1x">车辆</p>
</Button>
</ButtonGroup>
</div>
<div v-if="filterBar.vehicleLayer" class="m-t-md box-shadow animated bounceIn">
<ButtonGroup class="white r" vertical>
<Button type="ghost" :class="['button-icon', filterBar.vehicleStatus.indexOf(0) < 0 ? '':'checked']" @click="vehicleStatusSwitch(0)">
<img :src="pointImgList[0]" class="w-16">
<p>空闲</p>
</Button>
<Button type="ghost" :class="['button-icon', filterBar.vehicleStatus.indexOf(1) < 0 ? '':'checked']" @click="vehicleStatusSwitch(1)">
<img :src="pointImgList[1]" class="w-16">
<p>预约中</p>
</Button>
<Button type="ghost" :class="['button-icon', filterBar.vehicleStatus.indexOf(2) < 0 ? '':'checked']" @click="vehicleStatusSwitch(2)">
<img :src="pointImgList[2]" class="w-16">
<p>租赁中</p>
</Button>
<Button type="ghost" :class="['button-icon', filterBar.vehicleStatus.indexOf(3) < 0 ? '':'checked']" @click="vehicleStatusSwitch(3)">
<img :src="pointImgList[3]" class="w-16">
<p>运维</p>
</Button>
<Button type="ghost" :class="['button-icon', filterBar.vehicleStatus.indexOf(4) < 0 ? '':'checked']" @click="vehicleStatusSwitch(4)">
<img :src="pointImgList[4]" class="w-16">
<p>故障</p>
</Button>
<Button type="ghost" :class="['button-icon', filterBar.vehicleStatus.indexOf(5) < 0 ? '':'checked']" @click="vehicleStatusSwitch(5)">
<img :src="pointImgList[5]" class="w-16">
<p>离线</p>
</Button>
<Button type="ghost" :class="['button-icon', filterBar.vehicleStatus.indexOf(6) < 0 ? '':'checked']" @click="vehicleStatusSwitch(6)">
<img :src="pointImgList[6]" class="w-16">
<p>亏电</p>
</Button>
</ButtonGroup>
</div>
</bm-control>
<!-- 状态栏 -->
<bm-control anchor="BMAP_ANCHOR_BOTTOM_LEFT">
<VmPanel class="no-padding p-y-sm p-x box-shadow">
<span>网点：<span class="text-error">{{branchData.length}}</span> 个</span><span class="m-l">车辆：<span class="text-error">{{totalRecords}}</span> 辆</span>
</VmPanel>
</bm-control>
<!-- 信息窗 -->
<bm-info-window :position="{lng: popInfo.lng, lat:popInfo.lat}" :show="popInfo.show" @close="infoWindowClose" :width="windowType == 1 ? 320 : 380" class="text-nowrap">
<template v-if="windowType == 1">
<Row type="flex" justify="center" align="middle" class="l-h-2x" layout="row">
<Col span="18" flex>
<h3 class="text-md l-h-2x _300"><span class="v-m" :title="popInfo.name.length > 7 ? popInfo.name : ''">{{popInfo.name | undefinedValue('暂无网点名') | subString(7)}}</span><Tag class="v-m m-l cursor-default">{{popInfo.type | parseServicePointType}}</Tag></h3>
<p v-if="popInfo.type == 2" class="text-ellipsis text-muted">{{popInfo.cooperationGroupName}}</p>
<p class="text-ellipsis text-muted" :title="popInfo.address">地址：{{popInfo.address | undefinedValue('暂无')}}</p>
</Col>
<Col span="6" class="text-center">
<p class="text-md text-error">{{popInfo.chargingPileNum | undefinedValue}}</p>
<p>充电桩总数</p>
</Col>
</Row>
</template>
<template v-if="windowType == 2">
<h3 class="text-md l-h-2x _300"><span class="v-m">{{popInfo.platenum | subString(8) | undefinedValue('暂无车牌')}}</span><Tag class="v-m m-l cursor-default">{{popInfo.mixStatus | parseCarStatus}}</Tag><span class="v-m text-muted text-sm pull-right">{{popInfo.collectTime}}</span></h3>
<div class="l-h-2x m-t-sm">
<span>剩余电量：</span>
<Progress :percent="popInfo.soc" :hide-info="true" class="w-md m-x-sm"></Progress>
<span>{{popInfo.soc | undefinedValue}}%</span>
</div>
<div class="l-h-2x">
<span>续航里程：</span>
<Progress :percent="parseInt(popInfo.lifeMileage / 5)" :hide-info="true" class="w-md m-x-sm"></Progress>
<span>{{popInfo.mileage | undefinedValue}} 公里</span>
</div>
<Row class="text-center r m-t p-y-sm light">
<Col span="8">
<Button type="text" class="" @click="showRecordModal(1)">
<span class="block text-md text-error">{{popInfo.tripTotal | undefinedValue('0')}}</span>
<span class="block">租赁记录</span>
</Button>
</Col>
<Col span="8">
<Button type="text" class="" @click="showRecordModal(2)">
<span class="block text-md text-error">{{popInfo.tripReserveTotal | undefinedValue('0')}}</span>
<span class="block">预约记录</span>
</Button>
</Col>
<Col span="8">
<Button type="text" class="" @click="showRecordModal(3)">
<span class="block text-md text-error">{{popInfo.tripEvaluate | undefinedValue('0')}}</span>
<span class="block">评论记录</span>
</Button>
</Col>
</Row>
</template>
</bm-info-window>
<!-- 聚合网点 -->
<bml-marker-clusterer :averageCenter="true">
<template v-for="(item, index) in branchData">
<bm-marker :key="item.id" :position="{lng: item.lng, lat: item.lat}" :icon="{url: item.type == 2 ? '/static/images/map/map_qi.png':'/static/images/map/map_pu.png', size: {width: 28, height: 40}}" @click="openInfoWindow($event, item, 1)" ></bm-marker>
</template>
</bml-marker-clusterer>
<!-- 聚合网点 -->
<!-- 聚合车辆点 -->
<bml-marker-clusterer :averageCenter="true">
<template v-for="(item, index) in carData">
<bm-marker v-if="filterBar.vehicleStatus.indexOf(item.mixStatus) > -1" :key="item.id" :position="{lng: item.lng, lat: item.lat}" :icon="{url: pointImgList[item.mixStatus], size: {width: 24, height: 24}}" @click="openInfoWindow($event, item, 2)" >
<bm-label :content="item.soc == undefined ? '···' : item.soc + '%'" :title="item.soc == undefined ? '未知' : ''" :labelStyle="item.mixStatus == 6 ? warningStyle : normalStyle" :offset="{width: -8, height: -22}"/>
</bm-marker>
</template>
</bml-marker-clusterer>
<!-- 聚合车辆点 -->
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
</baidu-map>
</Card>
<!--历史记录-->
<VmCarRecords :isOpen="recordsModal" :data="currentCarData" :value="recordsType" @on-visible-change="onRecordsModalClose"></VmCarRecords>
<!--历史记录/-->
</div>
</template>帮你格式化了一下，以后记得用三反引号括代码块。这样看不出你说的出问题覆盖物是哪个，再精简一下吧。
nickliufc
commented
6 years ago 嗯，我看到了，谢谢~！ baidu-map里面的代码都是覆盖物，我说的滚动条问题在id="carContainer"这个容器上，即左边的“车辆列表”容器上，效果图如下：
Dafrok
commented
6 years ago 搜了一下你的代码，你说的那个其实不叫覆盖物，叫控件，与覆盖物所处的层级不同不是一回事。 我大概知道怎么回事了，下班看一下
nickliufc
commented
6 years ago 哦，对，是bm-control，理解有误，辛苦啦~！
另外，关于bml-marker-clusterer的问题也帮忙看下呗，我看了下，相关代码是压缩在vue-baidu-map/index.js里
Dafrok
commented
6 years ago 原因查到了，无法滚动是因为滚动的时候 wheel 事件冒泡到了地图容器上，容器收到这个事件后执行 preventDefault 和缩放两个句柄，把 native 的 wheel 行为干掉了。之前的版本是因为设计失误，把控件的元素丢到地图容器外面了，这样虽然滚动行为看起来正常了，但是会造成排版上的问题。
综上所述，我认为这个是百度地图本身的 featrue，所以不打算针对这个问题做迭代。如果你想实现原生的滚动行为，只需在自定义控件上阻止 wheel 事件冒泡即可。
nickliufc
commented
6 years ago 好的收到，非常感谢~！
sivail-Q
commented
6 years ago @Dafrok 我有尝试自定义控件上组织wheel事件冒泡，这个在chrome运行是可以的。但是IE还是没有起作用。<bm-control anchor="BMAP_ANCHOR_TOP_LEFT" @wheel.native.stop="getEventTar($event)"> @wheel.native.stop="getEventTar($event)" getEventTar(e) { //console.log(e.target); }, 具体的写法我是这样的。
sivail-Q
commented
6 years ago @Dafrok 已经解决了。IE11特性导致的。@DOMMouseScroll.native.stop="getEventTar" @mousewheel.native.stop="getEventTar" @wheel.native.stop="getEventTar" 。分别是IE、firfox、chrome的滚轮事件。你可以写在你的API中，防止别人踩坑了。
[BUG 反馈] 地图上的覆盖物上滚轮事件被地图拦截，覆盖物上的滚动条无法滚动，而地图却在缩放
浏览器版本号
chrome 63
Vue 版本号
2.0
组件库版本号
0.20.3
现象描述
完整异常信息
在线示例 / 仓库 URL
无
复现用例
预期输出
实际输出