移动端H5页面引入高德地图的一些问题记录

web端显示

移动端显示

1. 移动端和web端显示的地图范围一样大，并且在移动端地图的zoom和web端一致
   这个问题是在公司开发邀请函的时候碰到的，因为要在移动端显示的范围足够大，使用zoom并不能满足需求了，例如如下代码

 amap = new AMap.Map('map-container', {
      viewMode: '2D', // 默认使用 2D 模式
      zoom: 14, //设置地图显示的缩放级别
      center: [props.lon, props.lat],
    });

这时的zoom只能控制地图的缩放，因为移动端的宽度相较于web端还是比较小的，如果让移动端即保证zoom值一样，还显示的范围更大
思路：先让地图的div宽高为200%（自己可根据需求自定义），再使用transform: scale(0.5) translate(-50%, -50%);来进行缩放，简不简单？？？当时自己都笑了

#map-container {
  width: 200%;
  height: 200%;
  // border: 1px solid #5b9dff;
  border-radius: 5px;
  transform: scale(0.5) translate(-50%, -50%);
}

就这样，结束了。。。。。。