'message'

pages/index/index.js

@@ -1,11 +1,20 @@
 // pages/index/index.js
+
+const htmlSnip = `<div class="textContainer">
+    <h1 class="titleHead">景区介绍<h1>
+    <article class="introContent">&emsp;&emsp;重要的时间节点，关键的奋斗坐标。10月16日，中国共产党第二十次全国代表大会隆重开幕。这是在迈上全面建设社会主义现代化国家新征程、向第二个百年奋斗目标进军的关键时刻召开的一次十分重要的大会。无论是会场外的阔步身姿，还是会场内的热烈掌声，无不显示出代表们对非凡十年的深深自信，对党和国家前途的深深自信。</article>
+    <article class="introContent">&emsp;&emsp;自信源自非凡十年的成就。美好生活是什么？新时代这十年，给了亿万人民最好的答案。十年非凡成就，书写在摆脱贫困的村庄里、温馨和谐的社区中、紧张繁忙的码头上。十年来，居民人均可支配收入增长近八成，累计实现城镇新增就业1.3亿人，基本医疗保险覆盖13.6亿人，基本养老保险覆盖超10亿人，建成世界上规模最大的教育体系。一组组鲜活数字的背后是一个个家庭的欢笑。“人民对美好生活的向往，就是我们的奋斗目标”。尊重“人”的价值、成就“人”的梦想，既是非凡十年的逻辑起点，也是巨大成就的价值底色。</article>
+    <article class="introContent">&emsp;&emsp;自信源自中国道路的成功。“制度优势是一个国家的最大优势，制度竞争是国家间最根本的竞争”。只有回看走过的路、比较别人的路、远眺前行的路，很多问题才能看得深、把得准。世界上人口最多的国家、最大发展中国家，如此巨大的人口体量进入现代化，在世界上前所未有。在党的领导下，一个百年前积贫积弱、百废待兴的国家，探索出了一条迥异于西方的中国式现代化道路，创造了人类文明新形态，为人类实现现代化提供了新的选择。</article>
+</div>`
+
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
-        
+        htmlSnip,
+        imgList:['../../images/1.jpg','../../images/2.jpg']
 
 
     },

pages/index/index.wxml

@@ -10,5 +10,9 @@
             <image src="../../images/3.jpg"></image>
         </swiper-item>
     </swiper>
+
+    <view>
+        <rich-text nodes="{{htmlSnip}}"></rich-text>
+    </view>
     
 </view>

pages/index/index.wxss

@@ -11,3 +11,19 @@
     height: 100%;
 }
 
+/* 文本区 */
+.textContainer{
+    margin: 10rpx 20rpx;
+}
+/* 标题 */
+.titleHead{
+    font-size: 50rpx;
+    padding: 10rpx 0;
+}
+/* 内容 */
+.introContent{
+    padding-top: 10rpx;
+    font-size: 42rpx;
+    font-family: '仿宋';
+}
+

pages/map/map.js

@@ -6,11 +6,12 @@ Page({
      */
     data: {
         subkey: 'U7XBZ-KCDLU-AUOVO-BO64B-BQ6F2-HNFEI',
-        showlocation: "true",
-        showcompass: "true",
-        enabletraffic: "true",
-        longitude: "103.69618",
-        latitude: "30.61249",
+        showlocation: "true", //显示带有方向的当前定位点
+        showcompass: "true", //显示指南针
+        enabletraffic: "false", //是否开启实时路况
+        longitude: "103.69618", //中心经度
+        latitude: "30.61249", //中心纬度
+        //标记点位
         marks: [{
                 id: 1,
                 latitude: 30.61249,
@@ -18,61 +19,76 @@ Page({
                 title: "崇州万达广场",
                 iconPath: "../../images/location.png",
                 width: 30,
-                height: 30
+                height: 30,
+                callout: {
+                    content: '崇州万达广场',
+                    bgColor: '#fff',
+                    fontSize: '32rpx',
+                    display: 'ALWAYS'
+                }
             },
             {
                 id: 2,
                 latitude: 30.62249,
                 longitude: 103.59618,
-                title: "牛叉村",
+                title: "崇州市牛叉村委会",
                 iconPath: "../../images/location.png",
                 width: 30,
-                height: 30
+                height: 30,
+                callout: {
+                    content: '崇州市牛叉村委会',
+                    bgColor: '#fff',
+                    fontSize: '32rpx',
+                    display: 'ALWAYS'
+                }
+            },
+            {
+                id: 3,
+                latitude: 30.62649,
+                longitude: 103.63618,
+                title: "崇州市牛叉不得了村",
+                iconPath: "../../images/location.png",
+                width: 30,
+                height: 30,
+                callout: {
+                    content: '崇州市牛叉不得了村',
+                    bgColor: '#fff',
+                    fontSize: '32rpx',
+                    display: 'ALWAYS'
+                }
             }
         ],
+        //搜索点位
         searchmarks: [{
             latitude: 30.61249,
             longitude: 103.69618,
-            title: "中心位置",
-            iconPath: "../../images/location.png",
-            width: 30,
-            height: 30
-        }],
-        searchmark: [{
-            latitude: 0,
-            longitude: 0,
             title: "",
             iconPath: "../../images/location.png",
             width: 30,
             height: 30
         }],
-        searchContent:''
+        points: [], //可视页面显示的点数组，通过遍历marks获得
+        searchContent: '', //搜索内容
+        showSearch: false //是否展示搜索内容区
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
-
-    },
-
-    //选择位置
-    chooseLocation() {
-        var that = this;
-        wx.chooseLocation({
-            success(res) {
-                console.log(res);
-                that.setData({
-                    searchmarks: [{
-                        latitude: res.latitude,
-                        longitude: res.longitude,
-                        title: res.name,
-                        iconPath: "../../images/location.png",
-                        width: 30,
-                        height: 30
-                    }]
-                })
+        let marks = this.data.marks
+        var arr = new Array(marks.length)
+        for (let i = 0; i < marks.length; i++) {
+            let latitude = marks[i].latitude
+            let longitude = marks[i].longitude
+            arr[i] = {
+                longitude,
+                latitude
             }
+        }
+        // console.log(arr);
+        this.setData({
+            points: arr
         })
     },
 
@@ -85,92 +101,104 @@ Page({
         // map.moveToLocation();
     },
 
+    // 输入框聚焦时的事件
+    getList() {
+        this.setData({
+            showSearch: true,
+            searchContent: ''
+        })
+    },
+
+    //定义模糊查找的函数
+    findTarget(list, keyword, attribute = "name") {
+        const reg = new RegExp(keyword)
+        const arr = []
+        for (let i = 0; i < list.length; i++) {
+            if (reg.test(list[i][attribute])) {
+                arr.push(list[i])
+            }
+        }
+        return arr
+    },
 
     //获取输入的搜索数据
-    getSearchInput(e){
+    getSearchInput(e) {
         // console.log(e.detail.value);
         this.setData({
-            searchContent:e.detail.value
+            searchContent: e.detail.value
         })
         // console.log(this.data.searchContent);
+        let marks = this.data.marks
+        let searchContent = this.data.searchContent
+        let arr = this.findTarget(marks, searchContent, 'title')
+        if (arr.length) {
+            this.setData({
+                searchmarks: arr
+            })
+        }
+        // console.log(this.data.searchmarks);
     },
 
-    //搜索按钮功能
-    toSearch(){
-        var that = this
+
+    // 点击搜索待选区选项的事件
+    myChosed(e) {
+        // console.log(e.currentTarget.dataset.index);
+        let index = e.currentTarget.dataset.index
         let marks = this.data.marks
+        let searchmarks = this.data.searchmarks
         let searchContent = this.data.searchContent
-        if(!searchContent){
-            wx.showModal({
-                title:'搜索失败',
-              content: '您还没有输入要搜索的内容，无法进行搜索',
+        if (!searchContent) {
+            this.setData({
+                searchContent: marks[index].title,
+                showSearch: false
+            })
+        } else {
+            this.setData({
+                searchContent: searchmarks[index].title,
+                showSearch: false
             })
-            return
-        }
-        var flag = false
-        var length = searchContent.length
-
-        // console.log(length);
-        for(let i = 0;i < length;i++){
-            var mText = marks[i].title
-            for(let x = 0,y = length - i;y <= length;x++,y++){
-                var sContent = searchContent.substring(x,y)
-                // if(mText.contains(sContent)){
-                //     wx.showModal({
-                //       content: '找到了',
-                //     })
-                // }
-            }
         }
-        // for(let i = 0;i < marks.length;i++){
-        //     console.log(marks[i].title);
-        //     if(searchContent == marks[i].title){
-        //         that.setData({
-        //             searchmarks: [{
-        //                 latitude: marks[i].latitude,
-        //                 longitude: marks[i].longitude,
-        //                 title: marks[i].title,
-        //                 iconPath: "../../images/location.png",
-        //                 width: 30,
-        //                 height: 30
-        //             }]
-        //         })
-        //         flag = true
-        //         console.log(flag);
-        //         break
-        //     }
-        // }
-        // if(!flag){
-        //     wx.showModal({
-        //       title: '未找到',
-        //       content:'您输入的目标未找到，请您核实后重新输入'
-        //     })
-        // }
-    },
-
-    //拉起外部导航
-    goLocat() {
-        wx.getLocation({
-            type: 'gcj02',
-            success: (res) => {
-                console.log(res);
-                // this.setData({
-                //     latitude: res.latitude,
-                //     longitude: res.longitude
-                // })
-                wx.openLocation({
-                    latitude: res.latitude,
-                    longitude: res.longitude,
-
-                })
-            }
+        let arr = this.findTarget(marks, this.data.searchContent, 'title')
+        this.setData({
+            searchmarks: arr
+        })
+        // console.log(this.data.searchContent);
+    },
+
+    //点击蒙层的事件
+    shut() {
+        this.setData({
+            showSearch: false
         })
     },
 
     //点击标记点的事件
     bmakt(e) {
-        console.log(e.markerId);
-        this.goLocat()
+        // console.log(e.markerId);
+        var index = e.markerId - 1;
+        let marks = this.data.marks
+        //拉起外部地图，并传递经纬度和名称
+        wx.openLocation({
+            latitude: marks[index].latitude,
+            longitude: marks[index].longitude,
+            name: marks[index].title
+        })
+    },
+
+    //我的位置点击事件
+    myLocate() {
+        const map = wx.createMapContext('map');
+        map.moveToLocation();
+    },
+
+    //返回按钮点击事件
+    returnBack(){
+        let points = this.data.points
+        const map = wx.createMapContext('map');
+        map.includePoints({
+            points:points,
+            padding:[40,40,40,40]
+        });
     },
 
     /**

pages/map/map.wxml

@@ -1,18 +1,40 @@
 <!--pages/map/map.wxml-->
 
 <view style="width: 100%;height: 100%;">
+   <view class="search">
+        <text class="searchBtn">搜索</text>
+        <input class="searchInput" type="text" value="{{searchContent}}" bindinput="getSearchInput" bindfocus="getList" placeholder="请输入要搜索的景点"/>
+   </view>
+   
     <map class="myMap" 
-    id="map"
+    id="map" 
     subkey="{{subkey}}" 
     name="导航" 
     show-location="{{showlocation}}" 
     show-compass="{{showcompass}}" 
     enable-traffic="{{enabletraffic}}" 
-    longitude="{{longitude}}" 
-    latitude="{{latitude}}" 
+    longitude="{{searchmarks[0].longitude}}" 
+    latitude="{{searchmarks[0].latitude}}" 
     markers="{{marks}}"
-    bindmarkertap="bmakt"
-    >
-    <cover-image src="../../images/icon_location.png" class="locat" bindtap="goLocat"></cover-image>
+    include-points="{{points}}"
+    bindmarkertap="bmakt">
     </map>
+    <view class="locat">
+        <image class="iconBtn" src="../../images/myLocal.png" bindtap="myLocate"></image>
+        <image class="iconBtn2" src="../../images/return.png" bindtap="returnBack"></image>
+    </view>
+</view>
+<view wx:if="{{showSearch}}" class="searchContain">
+    <view class="mask" bindtap="shut"></view>
+    <view class="searchContent">
+        <view class="searchList" wx:for="{{marks}}" wx:key="index" data-index="{{index}}" bindtap="myChosed">{{marks[index].title}}
+    </view>
+    </view>
+</view>
+<view wx:if="{{searchContent && showSearch}}" class="searchContain">
+    <view class="mask" bindtap="shut"></view>
+    <view class="searchContent">
+        <view class="searchList" wx:for="{{searchmarks}}" wx:key="index" data-index="{{index}}" bindtap="myChosed">{{searchmarks[index].title}}
+        </view>
+    </view>
 </view>

pages/map/map.wxss

@@ -11,39 +11,85 @@ page {
     width: 100%;
     height: 60rpx;
 }
-
+/* 搜索输入框 */
 .searchInput{
-    width: 80%;
+    width: 78%;
     height: 60rpx;
     margin-left: 20rpx;
     border: 1rpx solid gray;
     border-radius: 30rpx;
     padding-left: 30rpx;
 }
+/* 搜索按钮 */
 .searchBtn{
-    position: absolute;
-    right: 30rpx;
-    height: 60rpx;
+    margin-left: 20rpx;
+    font-size: 36rpx;
     line-height: 60rpx;
 }
 
-
+/* 地图区 */
 .myMap {
     margin-top: 20rpx;
     width: 100%;
-    height: 100%;
+    height: 93%;
 }
 
+/* 右下角两个按钮样式 */
 .locat{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
     position: absolute;
-    width: 100rpx;
-    height: 100rpx;
-    bottom: 20rpx;
-    right: 20rpx;
+    bottom: 60rpx;
+    right: 30rpx;
+}
+/* 我的位置按钮 */
+.iconBtn{
+    margin-bottom: 20rpx;
+    width: 80rpx;
+    height: 80rpx;
+    
+}
+/* 返回按钮 */
+.iconBtn2{
+    margin-bottom: 20rpx;
+    width: 60rpx;
+    height: 60rpx;
 }
 
-.showList{
-    z-index: 3;
+
+
+/* 搜索区 */
+.searchContain{
+    background-color: #fff;
+    position: fixed;
+    top: 60rpx;
     width: 100%;
     height: 100%;
+    padding-left: 30rpx;
+}
+/* 搜索区列表 */
+.searchList{
+    z-index: 3;
+    background-color: #fff;
+    padding: 20rpx 0 0 0;
+}
+/* 蒙层样式 */
+.mask{
+    z-index: 2;
+    /* background-color: rgba(0,0,0,.3); */
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+/* 搜索内容区 */
+.searchContent{
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+    height: 60rpx;
 }

pages/strategy/strategy.wxml

@@ -1,2 +1,13 @@
 <!--pages/strategy/strategy.wxml-->
-<text>pages/strategy/strategy.wxml</text>
+<view>
+    <view class="strategy">
+        <view class="route">
+            <text class="title">路线一：</text>
+            <text>卧室→客厅→厨房→阳台→客厅→卧室</text>
+        </view>
+        <view class="route">
+            <text class="title">路线二：</text>
+            <text>卧室→客厅→厨房→阳台→客厅→卧室</text>
+        </view>
+    </view>
+</view>

pages/strategy/strategy.wxss

@@ -1 +1,16 @@
-/* pages/strategy/strategy.wxss */
+/* pages/strategy/strategy.wxss */
+
+.strategy{
+    margin: 10rpx 20rpx;
+    font-size: 42rpx;
+}
+.route{
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 50rpx;
+}
+.title{
+    font-size: 50rpx;
+    font-weight: bold;
+    padding-bottom: 20rpx;
+}

utils/util.js

@@ -1,19 +0,0 @@
-const formatTime = date => {
-  const year = date.getFullYear()
-  const month = date.getMonth() + 1
-  const day = date.getDate()
-  const hour = date.getHours()
-  const minute = date.getMinutes()
-  const second = date.getSeconds()
-
-  return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
-}
-
-const formatNumber = n => {
-  n = n.toString()
-  return n[1] ? n : `0${n}`
-}
-
-module.exports = {
-  formatTime
-}