微信小程序怎么做地图上拉页面

用原生微信小程序怎么做这个地图上拉的页面，有没有demo看一下
效果链接： http://mmbiz.qpic.cn/mmbiz_gif/zZrrqNRmBjC1AWzLgKCAnKoYEpNG3wVSOVbibaEG18Twj1WIYlFUyZA5JHLibgI0lfbIxc31yRrX3qUbia8p2kHsg/0?wx_fmt=gif

<!--页面结构-->
<view>
  <map id="myMap"></map>
  <scroll-view scroll-y="true">
    <view>
      <!-- 这里是滚动内容 -->
    </view>
  </scroll-view>
</view>

<!--页面样式-->
<style>
  #myMap {
    width: 100%;
    height: 300px;
  }
</style>

<!--页面逻辑-->
<script>
  Page({
    onLoad: function () {
      // 初始化地图
      this.mapCtx = wx.createMapContext('myMap')
    },
  })
</script>

您可以使用微信小程序的map组件实现地图上拉的页面。

具体来说，您需要在页面的wxml文件中添加map组件，然后在wxs文件中设置地图的中心点和缩放级别。

以下是一个示例代码，展示了如何使用map组件在微信小程序中显示地图：

wxml文件：

<map id="map" show-location style="height: 300px; width: 100%;"></map>

wxs文件：

Page({
  onLoad: function() {
    // 设置地图的中心点和缩放级别
    this.setData({
      longitude: 116.403981,
      latitude: 39.914201,
      scale: 15
    });
  }
})

希望这能帮助您。