问题1:无法拖动缩放
问题描述
地图已经成功加载,但是无法拖动和缩放
问题原因
在#map加了z-index,z-index值不能小于0,否则无法操作到地图元素。
问题2:使用了淘宝flexible适配,UI元素太小
问题描述
由于flexible动态添加meta标签缩放webview,导致高德地图被缩放,font-size的设置并不能影响到UI组件尺寸,因此组件在界面显示很小。
问题解决
通过chrome浏览器,找到了对应的css控制样式,在自己的css重写了样式使之适配不同dpr的设备。#map {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 0; }
#map, .amap-ui-control-zoom a {
font-size: 14px; }
[data-dpr="2"] #map, [data-dpr="2"] .amap-ui-control-zoom a {
font-size: 28px; }
[data-dpr="3"] #map, [data-dpr="3"] .amap-ui-control-zoom a {
font-size: 42px; }
.amap-ui-control-zoom a, .amap-ui-mobile .amap-ui-control-zoom a {
width: 32px;
height: 36px;
line-height: 36px; }
[data-dpr="2"] .amap-ui-control-zoom a, [data-dpr="2"] .amap-ui-mobile .amap-ui-control-zoom a {
width: 64px;
height: 72px;
line-height: 72px; }
[data-dpr="3"] .amap-ui-control-zoom a, [data-dpr="3"] .amap-ui-mobile .amap-ui-control-zoom a {
width: 96px;
height: 108px;
line-height: 108px; }
#map .amap-ui-control-zoom {
width: 32px; }
[data-dpr="2"] #map .amap-ui-control-zoom {
width: 64px; }
[data-dpr="3"] #map .amap-ui-control-zoom {
width: 96px; }