微信小程序肯德基外卖地址地图导航页设计制作开发教程

本文给大家带来的是微信小程序肯德基外卖地址地图导航页设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<view class="container">
  <view class="header">
    <view class="select-city">
      <text>南昌</text>
      <image src="../../image/sanjiao.png"></image>
    </view>
    <view class="weui-search-bar">
      <view class="weui-search-bar__form">
        <view class="weui-search-bar__box">
          <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
          <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping"
          />
          <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
            <icon type="clear" size="14"></icon>
          </view>
        </view>
        <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
            <icon class="weui-icon-search" type="search" size="14"></icon>
            <view class="weui-search-bar__text">搜索</view>
        </label>
      </view>
      <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
    </view>
    <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}" style="display: none">
      <navigator url="" class="weui-cell" hover-class="weui-cell_active">
        <view class="weui-cell__bd">
          <view>实时搜索文本</view>
        </view>
      </navigator>
      <navigator url="" class="weui-cell" hover-class="weui-cell_active">
        <view class="weui-cell__bd">
          <view>实时搜索文本</view>
        </view>
      </navigator>
      <navigator url="" class="weui-cell" hover-class="weui-cell_active">
        <view class="weui-cell__bd">
          <view>实时搜索文本</view>
        </view>
      </navigator>
      <navigator url="" class="weui-cell" hover-class="weui-cell_active">
        <view class="weui-cell__bd">
          <view>实时搜索文本</view>
        </view>
      </navigator>
    </view>
  </view>
  <view class="content">
		<map id="myMap" longitude="{{longitude}}" latitude="{{latitude}}"
		style="width: 100%; height: 100%" markers="{{markers}}" covers="{{covers}}" scale="18"></map>
	</view>
  <view class="footer">
    <view class="address-title">你可能在的位置</view>
    <scroll-view class="address-list" style="height:299px;" scroll-y="true">
      <view class="address-item" wx:for="{{pois}}" wx:for-item="poi" 
        data-name="{{poi.address}}" catchtap="ToDetailPage">
        <image src="../../image/position.png" data-name="{{poi.address}}" catchtap="ToDetailPage"></image>
        <text catchtap="ToDetailPage" data-name="{{poi.address}}">{{poi.address}}</text>
      </view>
    </scroll-view>
  </view>
</view>

二、wxss样式文件代码如下：

.container {
    height: 667px;
    position: relative;
}

.container .content {
    margin-top: 48px;
    height: 43%;
    position: relative;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    opacity: .9;
    display: flex;
    flex-direction: row;
    z-index: 9;
    border: 1rpx solid #E6E6EA;
}

.header .select-city {
    height: 28px;
    width: 46px;
    line-height: 0px;
    text-align: left;
    padding-left: 10px;
    padding-top: 20px;
    font-size: 16px;
    border-radius: 4px;
    color: #9B9B9B;
    flex: 1;
    background-color: #EFEFF4;
}

.header .select-city image {
    margin-left: 6px;
    height: 14px;
    width: 14px;
    vertical-align: middle;
}

.weui-search-bar {
    position: relative;
    flex: 5;
}

.searchbar-result {
    position: absolute;
    top: 36px;
    left: 79px;
    width: 247px;
    margin-top: 0;
    font-size: 14px;
}
.searchbar-result .weui-cell {

}

.searchbar-result:before {
    display: none;
}

.weui-cell {
    padding: 12px 15px 12px 35px;
}

.weui-search-bar__cancel-btn {
    font-size: 14px;
    color: #e02d3f;
}

.container .footer {
    width: 100%;
    background-color: #EFEFF4;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    text-align: left;
    padding-left: 20px;
    color: dimgray;
    opacity: .8;
    border-bottom: 2px solid #e02d3f;
}

.footer .address-list {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #fff;
}
.footer .address-item {
    height: 48px;
    width: 100%;
    line-height: 48px;
    padding: 15px 10px;
    border-bottom: 1px solid #E6E6EA;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer .address-item text{
    font-size: 16px;
    color: #000;
    font-weight: 300;
}

.footer .address-item image{
    height: 16px;
    width: 16px;
    vertical-align: center;
    margin-right: 10px;
}

三、js页面代码如下：

Page({
  data: {
    inputShowed: false, 
    inputVal: "",
    latitude: 0, 
    longitude: 0, // 绘制地图所需的经纬度
    markers: [], // 地图标记点
    pois: [], // 附近的地名对象数组
    kfcNear: '' // 最近的kfc，暂未使用
  },
  onReady: function () {
    console.log('ready');
    wx.setNavigationBarTitle({
      title: '外卖地址'
    })
    // 得到当前位置
    wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        let that = this
        let _latitude = res.latitude
        let _longitude = res.longitude
        console.log(res.latitude, res.longitude)

        let QQMapWX = require('qqmap-wx-jssdk.min.js');
        let demo = new QQMapWX({
          key: '5Q2BZ-O3W24-V6DUN-DZ4Z7-H427K-WCB7R' // 必填
        });
        wx.showToast({
          title: '地图加载中',
          icon: 'loading',
          duration: 0,
          mask: true
        })
        that.setData({
          latitude: _latitude,
          longitude: _longitude,
          markers: [{
            latitude: _latitude,
            longitude: _longitude,
            name: '当前位置',
            desc: 'KFC在您身边'
          }]
        })
        // 附近可能的位置
        demo.reverseGeocoder({
          location: {
            latitude: _latitude,
            longitude: _longitude
          },
          get_poi: 1,
          success: function (res) {
            // console.log(res);
          },
          fail: function (res) {
            console.log(res);
          },
          complete: function (res) {
            console.log(res);
            that.setData({
              // 将得到周围地名的数组
              pois: res.result.pois
            })
          }
        });

        //   搜索附近
        demo.search({
          keyword: '肯德基',
          location: {
            latitude: _latitude,
            longitude: _longitude
          },
          success: function (res) {
            // console.log(res);
          },
          fail: function (res) {
            // console.log(res);
          },
          complete: function (res) {
            console.log(res.data[0].address)
            that.setData({
              kfcNear: res.data.address
            })
          }
        });
        console.log(this.data.markers)
        // 绘制地图
        this.mapCtx = wx.createMapContext('myMap', function () {
          wx.hideToast();
        })
      }
    })
  },
  // 设置选定位置为我的位置并跳转
  ToDetailPage: function (event) {
    console.log(event.target.dataset)
    let OrderAddress = {
      address: [],
      isHall: false 
    }
    //遍历去重
    let item = OrderAddress.address.find(item=>item==event.target.dataset.name)
    if(!item){
      OrderAddress.address.push(event.target.dataset.name)
    }
    wx.setStorage({
      key: "OrderAddress",
      data: OrderAddress,
    });
    wx.navigateTo({
      url:'/pages/takeout/message/message'
    })
  },
  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    this.setData({
      inputVal: "",
      inputShowed: false
    });
  },
  clearInput: function () {
    this.setData({
      inputVal: ""
    });
  },
  inputTyping: function (e) {
    // console.log(e.detail.value)
    this.setData({
      inputVal: e.detail.value
    });
  }
});

模板简介：该模板名称为【微信小程序肯德基外卖地址地图导航页设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。