NN2019090901/public/static/weixin/js/shop-map.js

var app = new Vue({
    'el': '#app',
    'data': {
        curNav: 'map',
        // 列表数据
        dataList: [],
        // 参数
        params: {
            page: 1,
            pageSize: 6
        },
        point: null,
        cpoint: null,
        map: null,
        mapParams: {
            level: 13,
            lng: 108.325449,
            lat: 22.823939,
        },
        info: {lng: 108.325449, lat: 22.823939},
        type: 0,
        loading: false,
        loaded: false,

    },
    created: function () {
        this.params.type = getParam('type');
        this.initPoint();
    },
    mounted: function () {
        this.initMap();


    },
    methods: {
        // 初始化定位
        initPoint: function () {
            var lng = sessionStorage.getItem('point_lng');
            var lat = sessionStorage.getItem('point_lat');
            if (lng) {
                this.mapParams.lng = lng;
            }

            if (lat) {
                this.mapParams.lat = lat;
            }

        },
        // 地图初始化
        initMap: function () {
            var _this = this;
            _this.map = new BMap.Map('map');
            _this.point = new BMap.Point(_this.mapParams.lng, _this.mapParams.lat);
            _this.cpoint = new BMap.Point(_this.info.lng, _this.info.lat);

            // 创建点坐标
            _this.map.centerAndZoom(_this.point, _this.mapParams.level);
            _this.map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
            _this.map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
            _this.map.disableDoubleClickZoom();    //启用地图惯性拖拽，默认禁用

            _this.loadLocation();

            _this.loadMark(_this.point);
        },
        // 微信地图定位
        loadLocation: function () {
            var _this = this;
            $.post('/weixin/index/getJssdkParams', {url: location.href}, function (res) {
                var params = res.data;

                // 微信JSSDK
                wx.config({
                    debug: false, // 是否调试模式
                    appId: params.appId, // 必填，公众号的唯一标识
                    timestamp: params.timestamp, // 必填，生成签名的时间戳
                    nonceStr: params.nonceStr, // 必填，生成签名的随机串
                    signature: params.signature,// 必填，签名
                    jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表
                });

                // 初始化处理
                wx.ready(function () {
                    wx.getLocation({
                        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                        success: function (res) {
                            var convertor = new BMap.Convertor();
                            var ggPoint = new BMap.Point(res.longitude, res.latitude);
                            var pointArr = [];
                            pointArr.push(ggPoint);
                            convertor.translate(pointArr, 1, 5, function (data){
                                if(data.status === 0) {
                                    res.longitude = data.points[0].lng;
                                    res.latitude = data.points[0].lat;

                                    sessionStorage.setItem('point_lng', res.longitude)
                                    sessionStorage.setItem('point_lat', res.latitude)

                                    var point = new BMap.Point(res.longitude, res.latitude);
                                    var gc = new BMap.Geocoder();
                                    gc.getLocation(point, function (rs) {
                                        var addComp = rs.addressComponents;
                                        address = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;

                                        sessionStorage.setItem('city', r.address.city)
                                        sessionStorage.setItem('address', address)
                                    });

                                    point = {lng: res.longitude, lat: res.latitude};
                                    var mk = new BMap.Marker(point);
                                    _this.map.addOverlay(mk);
                                    _this.map.centerAndZoom(point, _this.mapParams.level);
                                    _this.map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
                                    _this.map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

                                    //alert('当前定位：'+JSON.stringify(r.point));
                                    _this.loadMark(point);
                                }
                            });
                        }
                    });
                });
            }, "json");
        },
        // 百度地图定位
        baiduLoadLocation: function () {
            var _this = this;
            var geolocation = new BMap.Geolocation();
            $.showLoading('获取定位中...')
            geolocation.enableSDKLocation();
            geolocation.getCurrentPosition(function (r) {
                $.hideLoading();
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMap.Marker(r.point);
                    var address = r.address.province + ' ' + r.address.city + ' ' + r.address.district;
                    sessionStorage.setItem('point_lng', r.point.lng)
                    sessionStorage.setItem('point_lat', r.point.lat)
                    sessionStorage.setItem('city', r.address.city)
                    sessionStorage.setItem('address', address)

                    _this.map.addOverlay(mk);
                    _this.map.centerAndZoom(r.point, _this.mapParams.level);
                    _this.map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
                    _this.map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

                    //alert('当前定位：'+JSON.stringify(r.point));
                    _this.loadMark(r.point);

                }
                else {
                    $.toast('获取您的位置信息失败', 'text');
                }
            }, {enableHighAccuracy: true, maximumAge: 1000});
        },
        // 坐标转换
        transPoint: function(point){
            var convertor = new BMap.Convertor();
            var ggPoint = new BMap.Point(point.lng, point.lat);
            var pointArr = [];
            pointArr.push(ggPoint);
            convertor.translate(pointArr, 1, 5, function (data){
                if(data.status === 0) {
                    point.lng = data.points[0].lng;
                    point.lat = data.points[0].lat;
                }
            });
        },
        // 加载地图数据
        /**
         * 加载车棚数据
         * @param lng 纬度
         * @param lat 经度
         */
        loadMark: function (point) {
            if (point) {
                var _this = this;
                $.showLoading('获取数据中...')
                // $.post('/weixin/shop/getList', {lng: '108.26120200', lat: '23.17164900'}, function (res) {
                $.post('/weixin/shop/getList', {lng: point.lng, lat: point.lat}, function (res) {
                    $.hideLoading();
                    if (res.code == 'success') {
                        var dataList = res.data;
                        if (dataList.length > 0) {
                            $.each(dataList, function (k, item) {
                                _this.cpoint = new BMap.Point(item.lng, item.lat);
                                _this.makeOverlay(_this.cpoint, item);
                            });
                        } else {
                            $.toast('附近暂无商家', "text")
                        }
                    } else if (res.code == 'login') {
                        login(res.data.url);
                    } else {
                        $.toast(res.message, "text")
                    }
                }, "JSON");
            }
        },
        // 地图加载
        makeOverlay: function (cpoint, data) {
            function ComplexCustomOverlay(point, text) {
                this._point = point;
                this._text = text;
            }

            ComplexCustomOverlay.prototype = new BMap.Overlay();
            ComplexCustomOverlay.prototype.initialize = function (map) {
                this._map = map;
                var div = this._div = document.createElement("div");
                div.style.position = "absolute";

                // div.style.zIndex = 600+data.id;
                div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
                div.style.textAlign = "center";
                div.style.whiteSpace = "nowrap";
                div.style.MozUserSelect = "none";
                div.setAttribute('class', 'info');
                div.setAttribute('data-id', data.id);
                div.setAttribute('data-point', this._point.lng + ',' + this._point.lat);
                var span = this._span = document.createElement("span");
                div.appendChild(span);
                span.appendChild(document.createTextNode(this._text));

                // 添加点击事件
                div.addEventListener("touchstart", function () {
                    var _info = $(this);
                    _info.addClass('active').siblings('.info').removeClass('active');
                    var mobile = data.mobile ? data.mobile : '';
                    var intro = data.intro ? data.intro : '无';
                    var colorType = data.color_type==1? '黑白打印机': (data.color_type==2? '彩印打印机' : '黑白/彩色打印机');
                    var address = data.d_address ? data.d_address : (data.address? data.address : '无');
                    var shop_name = data.shop_name ? '（'+data.shop_name+'）' : '';
                    $.modal({
                        title: '设备[' + data.device_name + ']',
                        text: "<div class='item address'>设备号：" + data.device_code + "</div><div class='item'>打印机类型："+colorType+"</div><div class='item mobile'>联系方式：<a href='tel:" + mobile + "'>联系店家"+shop_name+"</a></div><div class='item address'>店铺地址：" + address + "</div><div class='intro'>店铺介绍：" + intro + "</div>",
                        buttons: [
                            {
                                text: "取消",
                                className: "default",
                                onClick: function () {
                                    $.closeModal();
                                }
                            },
                            {
                                  text: "设备导航",
                                  onClick: function(){
                                      location.href = "http://api.map.baidu.com/marker?location=" + data.lat + "," + data.lng + "&title=" + data.device_name + "&content=" +address+ "&output=html";
                                  }
                              },

                        ]
                    });

                });



                map.getPanes().labelPane.appendChild(div);
                return div;
            }

            ComplexCustomOverlay.prototype.draw = function () {
                var map = this._map;
                var pixel = map.pointToOverlayPixel(this._point);
                this._div.style.left = pixel.x - 40 + "px";
                this._div.style.top = pixel.y-100 + "px";
            }


            // 初始化覆盖物数据
            var text = data.device_name;
            var myCompOverlay = new ComplexCustomOverlay(cpoint, text, text);
            this.map.addOverlay(myCompOverlay);



        }

    }
})