地图圈系统——微信小程序（7）
-
- 一、实现周边详情页面
- 二、效果展示
一、实现周边详情页面 接上一篇，实现周边详情页面：
新建一个页面名为arounddetail，在arounddetail.wxml文件中添加如下代码：
{{item.title}}
{{item.address}}
电话：{{item.tel}}
{{item.category}}
没有更多内容了
在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;
imybatis|Mybatis-plus通用CRUD