navigation/pages/map/map.js

// pages/map/map.js
import request from '../../utils/request'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        subkey: 'U7XBZ-KCDLU-AUOVO-BO64B-BQ6F2-HNFEI',
        showlocation: "true", //显示带有方向的当前定位点
        showcompass: "true", //显示指南针
        enabletraffic: "false", //是否开启实时路况
        longitude: "103.70618", //地图中心经度
        latitude: "30.51249", //地图中心纬度
        //标记点位
        marks: [],
        //搜索点位
        searchmarks: [{
            latitude: 30.61249,
            longitude: 103.69618,
            title: "",
            iconPath: "../../images/location.png",
            width: 30,
            height: 30
        }],
        points: [], //可视页面显示的点数组，通过遍历marks获得
        searchContent: '', //搜索内容
        showSearch: false //是否展示搜索内容区
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: async function (options) {

        let result = await request('/merchant/merchantAndCallout')
        // console.log("结果数据：", result);
        var marker = [];
        for (let i = 0; i < result.length; i++) {
            //console.log(result[i].status);
            if (result[i].status == 1) {
                marker[i] = {
                    id: result[i].id,
                    latitude: result[i].latitude,
                    longitude: result[i].longitude,
                    title: result[i].title,
                    iconPath: "../../images/location.png",
                    width: result[i].width,
                    height: result[i].height,
                    callout: result[i].callout
                }               
            }
        }
        // console.log(marker);
        this.setData({
            marks:marker,
            longitude:marker[0].longitude,
            latitude:marker[0].latitude
        })
        let marks = this.data.marks
        // console.log(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
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        //页面加载后默认定位到用户当前所在位置
        // const map = wx.createMapContext('map');
        // 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) {
        // console.log(e.detail.value);
        this.setData({
            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);
    },


    // 点击搜索待选区选项的事件
    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) {
            this.setData({
                searchContent: marks[index].title,
                showSearch: false
            })
        } else {
            this.setData({
                searchContent: searchmarks[index].title,
                showSearch: false
            })
        }
        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);
        var id = e.markerId;
        let marks = this.data.marks
        var index
        for(let i = 0;i < marks.length;i++){
            if(id == marks[i].id){
                index = i
            }
        }
        let lati = Number(marks[index].latitude)
        let longti = Number(marks[index].longitude)
        console.log(lati,longti);
        // console.log(typeof(lati));
        // //拉起外部地图，并传递经纬度和名称
        wx.openLocation({
            latitude: lati,
            longitude: longti,
            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]
        });
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})