山东大学项目实训——地图圈系统——微信小程序（7）

一、实现周边详情页面

接上一篇，实现周边详情页面：
新建一个页面名为arounddetail，在arounddetail.wxml文件中添加如下代码：

<navBar 
    title-text="周边" 
    back-icon="../../src/images/back@3x.png"
    background="#f2f2f2"
    bindback="back"/>
<!-- <view class="map_container"> -->
    <map class="map" id="mymap" longitude="{{longitude}}" scale="16" latitude="{{latitude}}" include-points="{{points}}" markers='{{markers}}' controls="{{controls}}" bindcontroltap="clickcontrol" bindmarkertap="clickmarkers" bindtap="clickblock">
      <cover-view class="top">
        <cover-view class="search-box">
          <cover-view class="placeholder" bindtap="showAddList">{{type}}</cover-view>
        </cover-view>
      </cover-view>
    </map>
  <!-- </view> -->
<view class="contain" wx:for="{{detail}}" bindtap="click" data-index="{{index}}">
  <view class="title_wrop">{{item.title}}</view>
  <view class="address_wrop">{{item.address}}</view>
  <view class="t_c_wrop">
    <view class="tel_wrop">电话：{{item.tel}}</view>
    <view class="cat_wrop">{{item.category}}</view>
  </view>
</view>
<view class="no_content">没有更多内容了</view>

在arounddetail.wxss文件中添加一下代码：

@import "../../lib/css/iconfont.wxss";

page {
  background-color: #e4e7ed;
}

.top {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  position: fixed;
  top: 140rpx;
  left: 0;
  padding: 30rpx 60rpx;
  z-index: 999;
  overflow: hidden;
}

.search-box {
  width: 610rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  background: rgb(255, 255, 255);
  margin-left: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  /* float: left; */
  overflow: hidden;
}

.search-box .placeholder {
  width: 380rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 40rpx;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 0 20rpx;
  box-sizing: border-box;
  float: left; */
}

.map {
  height: 500rpx;
  border-bottom: 1px solid rgb(41, 40, 40);
}

.contain {
  margin: 10rpx 15rpx;
  height: 180rpx;
  background-color: #fff;
  border-radius: 10rpx;
  display: flex;
  flex-direction: column;
  padding-top: 10rpx;
}

.title_wrop {
  flex: 1;
  font-size: 40rpx;
  padding-left: 30rpx;
  display: flex;
  align-items: center;
}

.address_wrop {
  flex: 1;
  font-size: 26rpx;
  padding-left: 30rpx;
  display: flex;
  align-items: center;
}

.t_c_wrop {
  flex: 1;
  display: flex;
  padding-left: 30rpx;
}

.tel_wrop {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 26rpx;
}

.cat_wrop {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 26rpx;
}

.no_content{
  display: flex;
  justify-content: center;
  align-items: center;

}

在arounddetail.js文件中添加以下代码：

// pages/arounddetail/arounddetail.js
import { CDN_PATH, MOYUAN_KEY, BAIQIAN_KEY, YULU_KEY, DIFUNI_KEY, REFERER } from '../../config/appConfig';
var app = getApp();
// 引入SDK核心类
var QQMapWX = require('../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js');
// 实例化API核心类
var qqmapsdk;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    longitude:0,
    latitude:0,
    type:"美食",
    detail:[
    ],
    markers:[],
    address:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    var address=JSON.parse(options.address)
    this.setData({
      type:options.type,
      detail:JSON.parse(options.detail),
      address,
      longitude: address.longitude,
      latitude: address.latitude
    })
    var detail = JSON.parse(options.detail)
    var markers=[]
    markers.push({
      longitude: address.longitude,
      latitude: address.latitude,
      iconPath: "../../src/images/blue.png"
    })
    for(var i=0;i<detail.length;i++){
      markers.push({
        longitude:detail[i].longitude,
        latitude:detail[i].latitude,
        iconPath:"../../src/images/ding.png"
      })
    }
    this.setData({
      markers,
    })
  },
  click(e){
    console.log(e)
    let index = e.currentTarget.dataset.index
    // var a=wx.getStorageSync("my")
    // var b=JSON.parse(a)
    // var points=[]
    // points.push(b)
    var c={
      longitude: this.data.detail[index].longitude,
      latitude: this.data.detail[index].latitude,
      name: this.data.detail[index].title,
      address: this.data.detail[index].address,
    }
    let endPoint = JSON.stringify({
      'name': this.data.detail[index].title,
      'latitude': this.data.detail[index].latitude,
      'longitude': this.data.detail[index].longitude,
    })
    let startPoint = JSON.stringify({
      'name': '山东大学齐鲁软件学院',
      'latitude': 36.667098,
      'longitude': 117.142485,
    })
    const key = 'LE2BZ-ZIPKU-AWCVW-4EGZV-YAMY2-36BS4';
    const referer = REFERER;
    // const endPoint = JSON.stringify(this.data.endPoint);
    // const startPoint = this.data.startPoint ? JSON.stringify(this.data.startPoint) : '';
    // const mode = this.data.modes[this.data.modeIndex].value;
    // const navigation = this.data.isNavigate ? 1 : 0;
    let url = 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
    if (startPoint) {
      url += '&startPoint=' + startPoint;
    }
    wx.navigateTo({
      url
    });
    // points.push(c)
    // wx.navigateTo({
    //   // url: '/pages/walk/walk?points=' + JSON.stringify(points) + '&title=' + this.data.detail[index].title,
    //   url: '/pages/route-plan/route-plan?type=2&startPoint=' + JSON.stringify(b) + '&endPoint=' + JSON.stringify(c)
    // })
  }
})

二、效果展示

点击地图任意位置，点击周边按钮

点击美食按钮：

点击下方任意地点，会进入导航页面：

点击其他也是一样，如公园：


至此，周边查询功能就实现了。