小程序-腾讯地图sdk

phpwsl  发布于 2018-12-06 22:47:40    72

wxml

<!--pages/map/index.wxml-->
  <view class="select_area">
    <image class="selectImg" src="../../images/search.png"></image>
    <input class="address_content" type="text" placeholder='搜索地点' bindchange='wxSearchTab'></input>
  </view>

  <map class="map_area" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" style="width:100%; height: 59%;" bindcontroltap="controltap" markers="{{markers}}">
        <cover-view class="cover" bindtap="navigation">
            <cover-image class="cover-img" src="../../images/navigation.png"/>
            <cover-view>开始导航</cover-view>
        </cover-view>
  </map>

<scroll-view class="place_around" scroll-y="true">
  <view style="padding:0rpx 20rpx 10rpx 20rpx;font-size:11px;color:#888;">此地图可查看当前定位附近10公里的厂房信息,如超过此范围请进行搜索定位</view>
  <block wx:for="{{aroundPlaces}}" wx:key="{{index}}">
    <view class="place_container" bindtap='selectAddress' data-num="{{index}}" data-location="{{item.location}}" data-address="{{item.address}}" data-district="{{item.district}}">
      <view class="place_content">
        <view class="place_title">{{item.title}}</view>
        <view class="place_address">{{item.address}}</view>
      </view>
      <text class="isSelected">{{index==curr_inx?'✔️':''}}</text>
    </view>
    <view class="person-line"></view>
  </block>
</scroll-view>

<!--底部-->
<include src="../public/footer.wxml" />

js

// pages/map/index.js
//获取应用实例
const app = getApp();

var QQMapWX = require('../../libs/qqmap/qqmap-wx-jssdk.min');
var qqmapsdk;
Page({

    /**
     * 页面的初始数据
     */
    data: {
        longitude: '',
        latitude: '',
        address:'',
        name: '',
        desc: '',
        aroundPlaces:[],
        curr_inx:0,
        markers: [
            {
            longitude: '',
            latitude: '',
                name: '',
                desc: '',
            }
        ],
        confirmAddress:"",
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function () {
        //实例化腾通地图sdk
        qqmapsdk = new QQMapWX({
            key: '' //这里自己的key秘钥进行填充
        });
        var vm = this;
        // 判断是否授权定位
        wx.getSetting({
            success (res) {
                if (res.authSetting['scope.userLocation']  === true ) {
                    // 获取当前定位
                    wx.getLocation({
                        type:'wgs84',// 默认wgs84
                        success:function(res){
                            qqmapsdk.reverseGeocoder({
                                location: {
                                    latitude: res.latitude,
                                    longitude: res.longitude,
                                },
                                success: function(op) {
                                    vm.setData({
                                        longitude: res.longitude,
                                        latitude: res.latitude,
                                        address:op.result.address,
                                        markers: [
                                            {
                                                longitude: res.longitude,
                                                latitude: res.latitude,
                                                address:op.result.address,
                                            }
                                        ]
                                    });
                                    // console.log(op)
                                    // 获取当前坐标附近地址
                                    vm.checkselectAddress(op.result.address_component.district, op.result.address, res.longitude, res.latitude);
                                    },
                                fail: function(op) {
                                    // console.log(op);
                                },
                                complete: function(op) {
                                    // console.log(op);
                                }
                            });
                        },
                        fail:function(res){},
                        complete:function(){}
                    });
                } else {
                    // 默认定位
                    vm.setData({
                        longitude: 113.39365,
                        latitude: 22.98892,
                        address:'广东省广州市番禺区西线路35号',
                        markers: [
                            {
                                longitude: 113.39365,
                                latitude: 22.98892,
                                address:'广东省广州市番禺区西线路35号',
                            }
                        ]
                    });
                    // 获取当前坐标附近地址
                    vm.checkselectAddress('番禺区', '广东省广州市番禺区西线路35号', '113.39365', '22.98892');
                }
            }
        });

        // console.log(vm.data.latitude)
    },
    confirm:function(){
        //现获取到所有页面,然后拿到当前页面的上一个页面[注意length-2的含义]
        let vm = this,pages = getCurrentPages(),prePage = pages[pages.length-2];
        //这里的prepage就是上一个页面的this,returnAddress属性一定要在上一个页面的data里事先定义。
        prePage.setData({returnAddress: vm.data.confirmAddress})
        wx.navigateBack();
    },
    // 搜索入口
    wxSearchTab: function (e) {
        let vm = this;
        qqmapsdk.getSuggestion({
            keyword: e.detail.value || '',
            success: function(res){
                // 获取坐标附近厂房
                app._get('/Api/maps/get-circle', {
                        district:res.data[0].district,
                        address:res.data[0].address,
                        longitude:res.data[0].location.lng,
                        latitude:res.data[0].location.lat,
                    },
                    function (tth) {
                        if (tth.data.code == 0) {
                            // console.log(tth.data.data)
                            // 标记地图上坐标
                            let resArray = tth.data.data;
                            let markersArray = [];
                            for (var i = 0; i < resArray.length; i++) {
                                markersArray[i] = {
                                    longitude: resArray[i].location.lng,
                                    latitude: resArray[i].location.lat,
                                    name: resArray[i].title,
                                    desc: resArray[i].address,
                                };
                                markersArray[i+1] = { // 搜索第一个选项坐标点
                                    longitude: res.data[0].location.lng,
                                    latitude: res.data[0].location.lat,
                                    name: res.data[0].title,
                                    desc: res.data[0].address,
                                }
                            }

                            vm.setData({
                                markers: markersArray,
                                latitude:res.data[0].location.lat,
                                longitude:res.data[0].location.lng,
                                aroundPlaces:res.data,
                                confirmAddress: res.data[0].address
                            });

                        } else if (tth.data.code == 1004) {
                            wx.showToast({
                                title: tth.data.msg,
                                image: '../../images/error.png',
                                duration: 2000
                            })

                            vm.setData({
                                markers:[{
                                    longitude: res.data[0].location.lng,
                                    latitude: res.data[0].location.lat,
                                    name: res.data[0].title,
                                    desc: res.data[0].address,
                                }],
                                latitude:res.data[0].location.lat,
                                longitude:res.data[0].location.lng,
                                aroundPlaces:res.data,
                                confirmAddress: res.data[0].address
                            });
                        }
                    });
            },
            fail: function(res){
                // console.log(res)
            }
        });
    },
    selectAddress: function(e){
        let vm = this,
            lat = e.currentTarget.dataset.location.lat,
            lng = e.currentTarget.dataset.location.lng,
            address = e.currentTarget.dataset.address,
            district = e.currentTarget.dataset.district;

        // 获取坐标附近厂房
        app._get('/Api/maps/get-circle', {
                district:district,
                address:address,
                longitude:lng,
                latitude:lat,
            },
            function (tth) {
                if (tth.data.code == 0) {
                    // 标记地图上坐标
                    let resArray = tth.data.data;
                    let markersArray = [];
                    for (var i = 0; i < resArray.length; i++) {
                        markersArray[i] = {
                            longitude: resArray[i].location.lng,
                            latitude: resArray[i].location.lat,
                            name: resArray[i].title,
                            desc: resArray[i].address,
                        };
                        markersArray[i+1] = { // 搜索第一个选项坐标点
                            longitude: lng,
                            latitude: lat,
                            name: address,
                            desc: address,
                        }
                    }

                    vm.setData({
                        markers: markersArray,
                        latitude:lat,
                        longitude:lng,
                        address: address,
                        aroundPlaces:resArray,
                        curr_inx: e.target.dataset.num,
                        confirmAddress: e.target.dataset.address
                    });

                } else if (tth.data.code == 1004) {
                    // console.log(tth.data)
                    wx.showToast({
                        title: tth.data.msg,
                        image: '../../images/error.png',
                        duration: 2000
                    })

                    vm.setData({
                        latitude: lat,
                        longitude: lng,
                        address: address,
                        markers: [{ longitude: lng, latitude: lat ,address: address}],
                        curr_inx: e.target.dataset.num,
                        confirmAddress: e.target.dataset.address
                    });
                }
            });
    },
    // cover-view 组件
    navigation: function() {
        let vm = this;
        // 调起导航组件
        wx.openLocation({
            latitude: Number(vm.data.latitude),
            longitude: Number(vm.data.longitude),
            name: vm.data.address,
            scale: 28
        })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
    },
    // 获取当前坐标附近厂房
    checkselectAddress: function (district, address, longitude, latitude) {
        let vm = this;

        app._get('/Api/maps/get-circle', {
                district:district,
                address:address,
                longitude:longitude,
                latitude:latitude,
            },
            function (tth) {
                if (tth.data.code == 0) {
                    // console.log(tth.data.data)
                    // 标记地图上坐标
                    let resArray = tth.data.data;
                    let markersArray = [];
                    for (var i=0;i<resArray.length;i++)
                    {
                        markersArray[i] = {
                                longitude:resArray[i].location.lng,
                                latitude:resArray[i].location.lat,
                                name:resArray[i].title,
                                desc:resArray[i].address,
                            };
                        markersArray[i+1] = { // 搜索第一个选项坐标点
                            longitude: longitude,
                            latitude: latitude,
                            name: address,
                            desc: address,
                        }
                    }
                    vm.setData({
                        markers:markersArray,
                        aroundPlaces: resArray,
                        confirmAddress: address
                    });
                } else if (tth.data.code == 1004) {
                    wx.showToast({
                        title:tth.data.msg,
                        image: '../../images/error.png',
                        duration: 3000
                    })
                }
            },
        );
    },
})


转载至:蓝衫黑裤白鞋