微信小程序-路线规划功能

lvbb66

于 2025-02-22 15:55:02 发布

阅读量462

点赞数 2

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.youkuaiyun.com/2302_80798583/article/details/145796425

版权

wxml

<view class="container">
  <view class="mapTop">
    <van-tabs active="{
  { active }}" color="#2A82E4" bind:change="onChange">
      <view wx:for="{
  {scenicList}}" wx:key="id">
        <van-tab title="{
  {item.name}}" />
      </view>
    </van-tabs>

    <!-- 显示地图 -->
    <view class="view" style="position: absolute;width: 100%;height: 80%;bottom: 20%">
      <map id="myMap" 
           style="width: 100%; height: 100vh;" 
           longitude="{
  {longitude}}" 
           latitude="{
  {latitude}}" 
           scale="16" 
           polyline="{
  {polyline}}" 
           show-location="true" 
           markers="{
  {markers}}">
      </map>
    </view>
  </view>
</view>

wxss

/* pages/atlas/index.wxss */
.container {
    background-color: #ffffff;
    padding-bottom: 10px;
}

/* 顶部导航栏 */
.top {
    width: 100%;
    height: 90px;
    color: #636363;
    display: flex;
    top: 0;
    position: fixed;
    font-size: