zoukankan      html  css  js  c++  java
  • 高德地图的使用

    layui.define(['jquery', 'notice'], function (exports) {
        let $ = layui.jquery;
        let notice = layui.notice;
    
        /**
         * 模拟请求,判断网络
         * @param {function} callback 回调
         */
        function onLine(callback) {
            let img = new Image();
            img.src = 'https://www.baidu.com/favicon.ico?_t=' + Date.now();
            img.onload = function () {
                if (callback) callback(true)
            };
            img.onerror = function () {
                if (callback) callback(false)
            };
        }
    
        function gaodeMap() {
            let that = this;
    
            this.map;
    
            let defaultOpt = {
                domID: 'container',
                zoom: 16,
                mapCenter: [121.503144, 31.235309]
            }
    
            this.opt = defaultOpt
    
            this.render = function (option) {
                // 根据网络情况,加载地图
                onLine(function (flag) {
                    if (flag) {
                        window.onLoad = function () {
                            that.opt = $.extend({}, defaultOpt, option);
                            that.init();
    
                            if (typeof option.done === 'function') {
                                option.done();
                            }
                        };
    
                        let url = 'https://webapi.amap.com/maps?v=1.4.15&key=d57b9f334d35402807617176c660f1c3&callback=onLoad&plugin=AMap.MouseTool,AMap.PolyEditor,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.CitySearch,AMap.PolyEditor,AMap.CircleEditor';
                        let jsapi = document.createElement('script');
                        jsapi.charset = 'utf-8';
                        jsapi.src = url;
                        document.head.appendChild(jsapi);
                    } else {
                        option.done();
                        console.log('网络故障,禁止使用地图');
                    }
                });
            }
        }
    
        /*
         * @method
         * @desc 卫星地图
         */
        gaodeMap.prototype.SatelliteLayer;
    
        gaodeMap.prototype.TileLayer;
    
        /*
         * @method
         * @param {object} lnglat 高德经纬度对象或者经纬度数组
         * @desc 初始化地图对象
         */
        gaodeMap.prototype.init = function () {
            let that = this;
    
            this.SatelliteLayer = new AMap.TileLayer.Satellite();
            this.TileLayer = new AMap.TileLayer();
    
            this.map = new AMap.Map(that.opt.domID, {
                zoom: that.opt.zoom,
                zooms: [5, 18],
                center: that.opt.mapCenter,
                viewMode: '3D',
                pitch: 60,
                resizeEnable: true,
            });
    
            if (this.SatelliteLayerBuildings) {
                this.map.add(this.SatelliteLayerBuildings)
            }
    
            // 3D地图
            this.add3DCompass();
    
            // 鼠标工具
            this.mouseTool = new AMap.MouseTool(that.map);
        }
    
        gaodeMap.prototype.checkMap = function () {
            if (!this.map) {
                notice.error('地图未加载或正在加载,请稍后再试')
                return true;
            }
        }
    
        /**
         * 当你不想每个函数都检查地图是否已加载时,可以使用以下方式执行函数
         */
        /**
         * 
        gaodeMap.prototype.ExcuteFunction = function (funcName,...params) {
            if (that.checkMap()) {
                return;
            }
    
            this[funcName].apply(this,params);
        }
         */
    
        /*
         * @method
         * @desc 添加3D地图
         */
        gaodeMap.prototype.add3DCompass = function () {
            let that = this;
    
            if (that.checkMap()) {
                return;
            }
    
            AMap.plugin([
                'AMap.ControlBar',
            ], function () {
                // 添加 3D 罗盘控制
                that.map.addControl(new AMap.ControlBar({
                    position: { top: '50px', right: '20px' }
                }));
            });
        }
    
        /*
         * @method
         * @desc 添加卫星地图
         */
        gaodeMap.prototype.addSatelliteLayer = function () {
            if (this.checkMap()) {
                return;
            }
    
            if (this.SatelliteLayer) {
                this.map.add(this.SatelliteLayer);
            }
        }
    
        /*
         * @method
         * @desc 移除卫星地图
         */
        gaodeMap.prototype.removeSatelliteLayer = function () {
            if (this.checkMap()) {
                return;
            }
    
            this.map.remove(this.SatelliteLayer);
        }
    
        /*
         * @method
         * @desc 添加卫星地图
         */
        gaodeMap.prototype.addTileLayer = function () {
            if (this.checkMap()) {
                return;
            }
            this.map.add(this.TileLayer);
        }
    
        /*
         * @method
         * @desc 移除卫星地图
         */
        gaodeMap.prototype.removeTileLayer = function () {
            if (this.checkMap()) {
                return;
            }
            this.map.remove(this.TileLayer);
        }
    
        /*
         * @method
         * @param {object} option
         * @param {object} option.lnglat 高德经纬度对象或者经纬度数组
         * @param {object} option.type 移动方式
         * @desc 设置地图中心位置
         */
        gaodeMap.prototype.setCenter = function (option) {
            if (this.checkMap()) {
                return;
            }
    
            if (!option) {
                return;
            }
    
            if (!option.lnglat) {
                return;
            }
    
            option.type = option.type || 1;
    
            if (option.type == 1) {
                this.map.setCenter(option.lnglat);
            } else {
                this.map.panTo(option.lnglat);
            }
        }
    
        /*
         * @method
         * @desc 标记点集合
         */
        gaodeMap.prototype.markers = {};
    
        /*
         * @method
         * @param {object} option
         * @param {object} option.lnglat 高德经纬度对象或者经纬度数组
         * @param {object} option.size 图片大小,图片地址无时,此项无效
         * @param {object} option.imageUrl 图片地址
         * @param {object} option.extData 自定义数据
         * @param {object} option.click 点的单击事件
         * @desc 设置地图中心位置
         */
        gaodeMap.prototype.addMarker = function (option) {
            if (this.checkMap()) {
                return;
            }
    
            var defaultOption = {
                //lnglat
                size: [32, 32],
                imageUrl: undefined
            };
    
            var tempOpt = $.extend({}, defaultOption, option);
    
            var markerOpt = {
                map: this.map
            };
    
            // 经纬度
            if (!tempOpt.lnglat) {
                return;
            }
    
            markerOpt.position = tempOpt.lnglat;
    
            // 自定义图片
            if (tempOpt.imageUrl) {
                markerOpt.icon = new AMap.Icon({
                    size: new AMap.Size(tempOpt.size[0], tempOpt.size[1]),
                    image: tempOpt.imageUrl,
                    imageSize: new AMap.Size(tempOpt.size[0], tempOpt.size[1])
                })
    
                markerOpt.offset = new AMap.Pixel(-(tempOpt.size[0] / 2), -tempOpt.size[1])
            }
    
            // 鼠标滑过时的显示
            markerOpt.title = tempOpt.title || '';
    
            // 自定义参数
            markerOpt.extData = tempOpt.extData;
            markerOpt.key = tempOpt.key;
    
            var marker = new AMap.Marker(markerOpt);
    
            if (option.isPanTo) {
                this.map.panTo(tempOpt.lnglat);
            }
    
            if (!markerOpt.key) {
                markerOpt.key = this.newGuid();
            }
    
            this.markers[markerOpt.key] = marker;
    
            if (tempOpt.click) {
                marker.on('click', function (e) {
                    tempOpt.click(e, marker.getExtData());
                })
            }
    
            if (typeof tempOpt.clickAfter === 'function') {
                tempOpt.clickAfter(tempOpt.extData);
            }
    
            // 文本标注
            if (tempOpt.labelText) {
                this.addMarkerLabel(marker, tempOpt.labelText)
            }
    
            return marker;
        }
    
        gaodeMap.prototype.addMarkerLabel = function (marker, label) {
            marker.setLabel({
                offset: new AMap.Pixel(0, -30),  //设置文本标注偏移量
                content: '<div class="map-label"><div>' + label + '<div> </div></div></div>', //设置文本标注内容
                direction: 'top' //设置文本标注方位
            });
        }
    
        /*
         * @method
         * @param {bool} type true:清除点  false:清除地图
         * @desc 清除地图上的标记
         */
        gaodeMap.prototype.clearMarkers = function (type, callback) {
            if (this.checkMap()) {
                return;
            }
    
            if (type) {
                $.each(this.markers, function (key, value) {
                    value.setMap(null);
                })
            } else {
                this.map.clearMap();
            }
    
            this.markers = {};
    
            if (this.clusterer) {
                this.clusterer.setMap(null);
                this.clusterer = undefined;
            }
    
            if (typeof callback == 'function') {
                callback()
            }
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @param {bool} isExclude bool:指定删除内容,true:删除不包含key的所有内容,false:删除包含可以的marker
         * @desc 清除地图上的标记
         */
        gaodeMap.prototype.clearMarker = function (key, isExclude) {
            if (this.checkMap()) {
                return;
            }
    
            if (isExclude == undefined) {
                isExclude = false;
            }
    
            var that = this;
    
            if (!isExclude) {
                if (key) {
                    if (this.markers[key]) {
                        var marker = this.markers[key];
    
                        marker.setMap(null);
    
                        delete this.markers[key]
                    }
                }
                //this.markers = {};
    
                if (this.clusterer) {
                    this.clusterer.setMap(null);
                    this.clusterer = undefined;
                }
            }
            else {
                $.each(that.markers, function (k, v) {
                    if (k != key) {
                        v.setMap(null);
    
                        delete that.markers[k]
                    }
                })
            }
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识的一部分
         * @desc 清除地图上的标记
         */
        gaodeMap.prototype.clearAssignMarkers = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            var that = this
    
            var keys = [];
    
            $.each(that.markers, function (k, v) {
                if (k.indexOf(key) > -1) {
                    keys.push(k);
                    v.setMap(null);
                }
            })
    
            $.each(keys, function (i, item) {
                delete that.markers[item];
            })
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @desc 根据key获取marker对象
         */
        gaodeMap.prototype.getMarker = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            if (key) {
                return this.markers[key]
            }
            return undefined;
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识的一部分
         * @desc 根据key获取marker对象集合
         */
        gaodeMap.prototype.getMarkers = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            var mrks = [];
    
            $.each(that.markers, function (k, v) {
                if (k.indexOf(key) > -1) {
                    mrks.push(v);
                }
            })
    
            return mrks;
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @param {array} size array:图标大小,默认值[60,60]
         * @desc 根据key设置图标大小
         */
        gaodeMap.prototype.setMarkerIcon = function (key, size) {
            if (this.checkMap()) {
                return;
            }
    
            var marker = this.markers[key]
    
            if (marker) {
                var _size = [60, 60];
    
                if (size) {
                    _size = size;
                }
    
                var icon = marker.getIcon()
    
                marker.setIcon(new AMap.Icon({
                    size: new AMap.Size(_size[0], _size[1]),
                    image: icon.w.image,
                    imageSize: new AMap.Size(_size[0], _size[1])
                }))
    
                marker.setOffset(new AMap.Pixel(-(_size[0] / 2), -_size[1]))
            }
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @desc 选中时的图标大小
         */
        gaodeMap.prototype.checkedMarker = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            this.setMarkerIcon(key, [45, 45]);
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @desc 反选时的图标大小
         */
        gaodeMap.prototype.uncheckedMarker = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            this.setMarkerIcon(key, [32, 32]);
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @desc 设置所有图标,按反选时的图标大小设置
         */
        gaodeMap.prototype.setAllMarkersIcon = function () {
            if (this.checkMap()) {
                return;
            }
    
            var that = this;
    
            $.each(that.markers, function (k, v) {
                that.uncheckedMarker(k);
            })
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识
         * @desc 设置所有图标,按反选时的图标大小设置
         */
        gaodeMap.prototype.setUncheckedMarkersIcon = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            var that = this;
    
            $.each(that.markers, function (k, v) {
                if (k.indexOf(key) > -1) {
                    that.uncheckedMarker(k);
                }
            })
        }
    
        /*
         * @method
         * @param {bool} key object:marker的指定唯一标识的一部分
         * @desc 设置选中的marker的图标大小
         */
        gaodeMap.prototype.setCheckedMarkersIcon = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            var that = this;
    
            $.each(that.markers, function (k, v) {
                if (k.indexOf(key) > -1) {
                    that.checkedMarker(k);
                }
            })
        }
    
        /*
         * @method
         * @desc 弹框对象
         */
        gaodeMap.prototype.infoWindow = undefined;
    
        /*
         * @method
         * @desc 关闭弹框
         */
        gaodeMap.prototype.addInfoWindow = function (option) {
            if (this.checkMap()) {
                return;
            }
    
            if (!option) {
                return
            }
            var html;
            if (option.content) {
                html = $(option.content)
            }
    
            this.infoWindow = new AMap.InfoWindow({
                offset: option.offset || new AMap.Pixel(0, -34),
                isCustom: true,// 自定义窗体  默认false
                closeWhenClickMap: option.closeWhenClickMap == undefined ? false : option.closeWhenClickMap, // 点击地图关闭信息窗,默认不关闭
                content: html.get(0)  //使用默认信息窗体框样式,显示信息内容
            });
    
            this.infoWindow.open(this.map, option.lnglat);
    
            this.bindCloseInfoWindow(html, option);
    
            if (typeof option.addFinish === 'function') {
                option.addFinish(html, option.extData);
            }
        }
    
        /*
         * @method
         * @desc 绑定关闭弹框事件
         */
        gaodeMap.prototype.bindCloseInfoWindow = function (html, option) {
            var that = this;
    
            html.find('.close-window').on('click', function () {
                that.infoWindow.close();
    
                if (typeof option.closeAfter === 'function') {
                    option.closeAfter(option.extData);
                }
            })
        }
    
        /*
         * @method
         * @desc 绑定关闭弹框事件
         */
        gaodeMap.prototype.closeInfoWindow = function () {
            if (this.infoWindow) {
                this.infoWindow.close();
            }
        }
    
        /*
         * @method
         * @desc 点聚合对象
         */
        gaodeMap.prototype.clusterer = undefined;
    
        /*
         * @method
         * @desc 添加点聚合效果
         */
        gaodeMap.prototype.addClusterer = function (keys, clickCallBack) {
            if (this.checkMap()) {
                return;
            }
    
            var tempMarkers = [];
            var that = this;
    
            for (var key in this.markers) {
                if (keys) {
                    $.each(keys, function (i, item) {
                        if (key.indexOf(item) > -1) {
                            tempMarkers.push(that.markers[key]);
                        }
                    })
                }
                else {
                    tempMarkers.push(that.markers[key]);
                }
            }
    
            if (!this.clusterer) {
                this.clusterer = new AMap.MarkerClusterer(this.map, tempMarkers, { gridSize: 80, maxZoom: 50, zoomOnClick: false });
    
                if (typeof clickCallBack === 'function') {
                    this.clusterer.on('click', function (cluster) {
                        clickCallBack(cluster)
                    })
                }
            } else {
                this.clusterer.clearMarkers();
                this.clusterer.setMarkers(tempMarkers);
            }
        }
    
        /*
         * @method
         * @desc 生成guid
         */
        gaodeMap.prototype.newGuid = function () {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
    
        /*
         * @method
         * @desc 覆盖物数组
         */
        gaodeMap.prototype.overlay = [];
    
        /*
         * @method
         * @desc 删除覆盖物
         */
        gaodeMap.prototype.removeOverlay = function (key) {
            if (this.checkMap()) {
                return;
            }
    
            if (key) {
                if (this.overlay[key]) {
                    var overlay = this.overlay[key];
                    this.map.remove(overlay);
                    delete this.overlay[key]
                }
            }
        }
    
        /*
         * @method
         * @desc 添加圆
         */
        gaodeMap.prototype.addCircle = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            if (!opt.center) {
                console.error('未提供中心点坐标');
                return
            }
    
            if (!opt.radius || opt.radius == 0) {
                console.error('未提供半径');
                return
            }
    
            var _defaultOpt = {
                //center: coor,
                //radius: radius, //半径
                strokeColor: "#008ad8",//线条颜色
                strokeOpacity: 0.4,//透明度
                strokeWeight: 3,
                // 线样式还支持 'dashed'
                fillColor: '#00b0ff',
                fillOpacity: 0.4,//填充透明度
                bubble: true,//允许冒泡到地图
                map: this.map
            }
    
            var circleOpt = $.extend({}, _defaultOpt, opt)
    
            var circle = new AMap.Circle(circleOpt)
    
            if (typeof circleOpt.click === 'function') {
                circle.on('click', function (e) {
                    var data = circle.getExtData()
    
                    circleOpt.click(e, data);
                })
            }
    
            if (circleOpt.text) {
                var center = this.getLonAndLat(circleOpt.center.getLng(), circleOpt.center.getLat(), 180, circleOpt.radius)
    
                this.addText({
                    text: circleOpt.text,
                    offset: new AMap.Pixel(0, 10),
                    coor: new AMap.LngLat(center.lng, center.lat) //circleOpt.center
                })
            }
    
            if (!circleOpt.key) {
                circleOpt.key = this.newGuid();
            }
    
            this.overlay[circleOpt.key] = circle;
        }
    
        /*
         * @method
         * @desc 画圆
         */
        gaodeMap.prototype.drawCircle = function (callback) {
            if (this.checkMap()) {
                return;
            }
    
            let that = this;
            let option = {
                strokeColor: "#80d8ff",
                strokeWeight: 6,
                strokeOpacity: 0.2,
                fillColor: '#00b0ff',
                fillOpacity: 0.4,
                strokeStyle: 'solid',
            }
    
            that.mouseTool.close();
    
            that.mouseTool = new AMap.MouseTool(that.map);
    
            that.map.clearMap();
    
            that.mouseTool.circle(option)
    
            // 无法移除
            // that.mouseTool.off('draw');
    
            that.mouseTool.on('draw', function (event) {
                let radius = event.obj.getRadius()
                let center = event.obj.getCenter()
                callback && callback(radius, center)
    
                // 编辑
                that.editCircle({
                    callback: callback,
                    radius: radius,
                    center: center
                });
            });
        }
    
        /*
         * @method
         * @desc 编辑圆
         */
        gaodeMap.prototype.editCircle = function (option) {
            if (this.checkMap()) {
                return;
            }
    
            let that = this;
    
            let editOption = {
                strokeColor: "#008ad8",
                strokeWeight: 3,
                strokeOpacity: 0.4,
                fillColor: '#00b0ff',
                fillOpacity: 0.4,
                strokeStyle: 'solid',
                center: option.center,
                radius: option.radius, //半径
                borderWeight: 3,
                strokeDasharray: [10, 10],
                zIndex: 50,
                map: that.map
            }
    
            that.map.clearMap();
    
            // 编辑前,先删除图层
            let circle = new AMap.Circle(editOption);
    
            let circleEditor = new AMap.CircleEditor(that.map, circle);
    
            circleEditor.on('adjust', function (e) {
                option.callback && option.callback(e.radius, option.center)
            })
    
            circleEditor.on('move', function (e) {
                option.callback && option.callback(option.radius, e.lnglat)
            })
    
            circleEditor.open();    //打开圆形编辑器
    
            that.map.setFitView();
        }
    
        /**
        * 根据一个经纬度及距离角度,算出另外一个经纬度
        * @param {float} lng 经度 113.3960698
        * @param {float} lat 纬度 22.941386
        * @param {int} brng 方位角 45 ---- 正北方:000°或360° 正东方:090° 正南方:180° 正西方:270°
        * @param {int} dist 90000距离(米)
        *
        * 1、角度转换为弧度公式:弧度=角度×(π ÷度180 )
        * 2、弧度转换为角度公式: 角度=弧度×(180÷π)
        */
        gaodeMap.prototype.getLonAndLat = function (lng, lat, brng, dist) {
            //大地坐标系资料WGS-84 长半径a=6378137 短半径b=6356752.3142 扁率f=1/298.2572236
            var a = 6378137;
            var b = 6356752.3142;
            var f = 1 / 298.257223563;
    
            var lon1 = lng * 1;
            var lat1 = lat * 1;
            var s = dist;
            var alpha1 = brng * (Math.PI / 180)//mapNumberUtil.rad(brng);
            var sinAlpha1 = Math.sin(alpha1);
            var cosAlpha1 = Math.cos(alpha1);
    
            //var tanU1 = (1 - f) * Math.tan(mapNumberUtil.rad(lat1));
            var tanU1 = (1 - f) * Math.tan(lat1 * (Math.PI / 180));
            var cosU1 = 1 / Math.sqrt((1 + tanU1 * tanU1)), sinU1 = tanU1 * cosU1;
            var sigma1 = Math.atan2(tanU1, cosAlpha1);
            var sinAlpha = cosU1 * sinAlpha1;
            var cosSqAlpha = 1 - sinAlpha * sinAlpha;
            var uSq = cosSqAlpha * (a * a - b * b) / (b * b);
            var A = 1 + uSq / 16384 * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq)));
            var B = uSq / 1024 * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)));
    
            var sigma = s / (b * A), sigmaP = 2 * Math.PI;
            while (Math.abs(sigma - sigmaP) > 1e-12) {
                var cos2SigmaM = Math.cos(2 * sigma1 + sigma);
                var sinSigma = Math.sin(sigma);
                var cosSigma = Math.cos(sigma);
                var deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 * (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) -
                    B / 6 * cos2SigmaM * (-3 + 4 * sinSigma * sinSigma) * (-3 + 4 * cos2SigmaM * cos2SigmaM)));
                sigmaP = sigma;
                sigma = s / (b * A) + deltaSigma;
            }
    
            var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1;
            var lat2 = Math.atan2(sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1,
                (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp));
            var lambda = Math.atan2(sinSigma * sinAlpha1, cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1);
            var C = f / 16 * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha));
            var L = lambda - (1 - C) * f * sinAlpha *
                (sigma + C * sinSigma * (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM)));
    
            var revAz = Math.atan2(sinAlpha, -tmp); // final bearing
    
            var lngLatObj = { lng: lon1 + L * (180 / Math.PI), lat: lat2 * (180 / Math.PI) }
            return lngLatObj;
        }
    
        /*
         * @method
         * @desc 添加多边形
         */
        gaodeMap.prototype.addPolygon = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            if (!opt.path || opt.path.length < 3) {
                console.error('未提供坐标')
                return
            }
    
            var _defaultOpt = {
                strokeColor: "#008ad8",//线条颜色
                strokeOpacity: 0.4,//透明度
                strokeWeight: 3,
                // 线样式还支持 'dashed'
                fillColor: '#00b0ff',
                fillOpacity: 0.4,//填充透明度
                bubble: true,//允许冒泡到地图
                map: this.map
            };
    
            var polygonOpt = $.extend({}, _defaultOpt, opt);
    
            var polygon = new AMap.Polygon(polygonOpt);
    
            if (typeof polygonOpt.click === 'function') {
                polygon.on('click', function (e) {
                    var data = polygon.getExtData()
    
                    polygonOpt.click(e, data);
                })
            }
    
            if (polygonOpt.text) {
                var point = this.getMinLatPoint(polygonOpt.path)
    
                this.addText({
                    text: polygonOpt.text,
                    offset: new AMap.Pixel(0, 10),
                    coor: point//polygonOpt.path
                })
            }
    
            if (!polygonOpt.key) {
                polygonOpt.key = this.newGuid();
            }
    
            this.overlay[polygonOpt.key] = polygon;
        }
    
        gaodeMap.prototype.getMinLatPoint = function (points) {
            var point = {};
    
            $.each(points, function (i, item) {
                if (item.getLat() < (point.lat || 999)) {
                    point = item;
                }
            })
    
            return point;
        }
    
        gaodeMap.prototype.addText = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            if (!opt.text) {
                console.error('添加文本标记失败,文本标记内容为空')
                return;
            }
    
            if (!opt.coor) {
                console.error('添加文本标记失败,文本标记坐标不确定')
                return;
            }
    
            var lnglat;
    
            if (opt.coor.length > 2) {
                lnglat = this.getCenterPoint(opt.coor);
            } else {
                lnglat = opt.coor;
            }
    
            var txt = new AMap.Text({
                text: opt.text,
                offset: opt.offset || new AMap.Pixel(0, 0),
                map: this.map,
                position: lnglat
            });
    
            txt.setStyle({ 'font-size': '10px' });
        }
    
        /**
         * 画多边形
         */
        gaodeMap.prototype.drawPolygon = function (callback) {
            if (this.checkMap()) {
                return;
            }
    
            let that = this;
            let option = {
                strokeColor: "#008ad8",
                strokeWeight: 3,
                strokeOpacity: 0.4,
                fillColor: '#00b0ff',
                fillOpacity: 0.4,
                strokeStyle: 'solid'
            }
            that.mouseTool.close();
    
            that.mouseTool = new AMap.MouseTool(that.map);
    
            that.map.clearMap();
    
            that.mouseTool.polygon(option)
    
            // 无法移除
            // that.mouseTool.off('draw');
    
            that.mouseTool.on('draw', function (event) {
                event.obj.getPath()
    
                callback && callback(event.obj.getPath())
    
                that.editPolygon({
                    paths: event.obj.getPath(),
                    callback
                })
            });
        }
    
        /**
         * 编辑多边形
         */
        gaodeMap.prototype.editPolygon = function (option) {
            if (this.checkMap()) {
                return;
            }
    
            let that = this;
    
            that.map.clearMap();
    
            let polygon = new AMap.Polygon({
                path: option.paths,
                isOutline: true,
                strokeColor: "#008ad8",
                strokeWeight: 3,
                strokeOpacity: 0.4,
                fillColor: '#00b0ff',
                fillOpacity: 0.4,
                strokeStyle: 'solid',
                map: that.map
            })
    
            let polyEditor = new AMap.PolyEditor(that.map, polygon);//创建多边形编辑器
    
            polyEditor.open();
    
            polyEditor.on('adjust', function (e) {
                option.callback && option.callback(polygon.getPath())
            })
    
            polyEditor.open();    //打开圆形编辑器
    
            that.map.setFitView();
        }
    
        /*
         * @method
         * @desc 获取中心坐标
         */
        gaodeMap.prototype.getCenterPoint = function (coor) {
            if (this.checkMap()) {
                return;
            }
    
            if (coor) {
                var total = coor.length;
                var lat = 0, lng = 0;
    
                $.each(coor, function (i, item) {
                    lat += (item.getLat() || item.lat) * Math.PI / 180;
                    lng += (item.getLng() || item.lng) * Math.PI / 180;
                })
    
                lat /= total;
                lng /= total;
    
                return new AMap.LngLat(lng * 180 / Math.PI, lat * 180 / Math.PI);
            }
        }
    
        gaodeMap.prototype.massMarks = undefined;
    
        /*
         * @method
         * @desc 设置海量点
         */
        gaodeMap.prototype.setMassMarkers = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            if (!opt) {
                return;
            }
    
            if (!opt.data) {
                return;
            }
            // 示例数据
            // {"lnglat":[116.258446,37.686622],"name":"景县","style":2}
    
            this.map.clearMap();
    
            if (!this.massMarks) {
                this.massMarks = new AMap.MassMarks(
                    opt.data,
                    {
                        //map: this.map,
                        opacity: 0.9,
                        zIndex: 99999,
                        alwaysRender: opt.alwaysRender || false,//是否在地图缩放时重绘
                        style: [{
                            anchor: new AMap.Pixel(0, 0),
                            url: '/images/green.png',
                            size: new AMap.Size(20, 20)
                        },
                        {
                            anchor: new AMap.Pixel(0, 0),
                            url: '/images/red.png',
                            size: new AMap.Size(20, 20)
                        }]
                    })
            }
            else {
                this.massMarks.setData(opt.data)
            }
    
            this.massMarks.setMap(this.map);
    
            var marker = new AMap.Marker({ content: ' ', map: this.map });
    
            this.massMarks.on('mouseover', function (e) {
                marker.setPosition(e.data.lnglat);
                marker.setLabel({ content: e.data.name })
            });
    
            this.massMarks.on('mouseout', function (e) {
                marker.setLabel({ content: "" })
            });
    
            this.map.setZoom(5);
            this.map.setCenter([102.342785, 35.312316])
        }
    
        /*
         * @method
         * @desc 清除海量点
         */
        gaodeMap.prototype.clearMassMarkers = function () {
            if (this.checkMap()) {
                return;
            }
    
            if (this.massMarks) {
                this.massMarks.clear();
            }
            this.map.clearMap();
        }
    
        /*
         * @method
         * @desc 添加行政范围
         */
        gaodeMap.prototype.addAreaRang = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            var _map = this.map;
            var that = this;
            (new AMap.Geocoder()).getAddress(opt.lnglat, function (status, result) {
                console.log(JSON.stringify(result))
                if (status === 'complete' && result.regeocode) {
                    // 获取区域编码
                    var adcode = result.regeocode.addressComponent.adcode;
    
                    // 设置显示范围
                    new AMap.DistrictSearch({
                        extensions: 'all',
                        subdistrict: 0
                    }).search(adcode, function (status, result) {
                        // 外多边形坐标数组和内多边形坐标数组
                        var outer = [
                            new AMap.LngLat(-360, 90, true),
                            new AMap.LngLat(-360, -90, true),
                            new AMap.LngLat(360, -90, true),
                            new AMap.LngLat(360, 90, true),
                        ];
    
                        var holes = result.districtList[0].boundaries
    
                        var pathArray = [
                            outer
                        ];
    
                        var centerPoint = that.getCenterPoint(holes[0])
    
                        pathArray.push.apply(pathArray, holes);
    
                        var polygon = new AMap.Polygon({
                            pathL: pathArray,
                            strokeColor: '#000000',
                            strokeWeight: 1,
                            fillColor: '#000000',
                            fillOpacity: 0.9
                        });
                        polygon.setPath(pathArray);
                        _map.add(polygon)
                        //_map.panTo(opt.lnglat);
                        _map.panTo(centerPoint)
                        _map.setZoom(opt.zoom || 12);
                    })
                } else {
                    console.log('经纬度查询失败')
                }
            });
        }
    
        gaodeMap.prototype.mapClick;
    
        /**
         * 绑定地图点击
         * @param {boolean} opt.isclearMap 是否清除地图
         * @param {string} opt.key 清除指定key的覆盖物
         * @param {Function} opt.callback 点击回调
         */
        gaodeMap.prototype.bindMapClick = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            let that = this;
    
            let _map = this.map;
    
            if (!that.mapClick) {
                that.mapClick = function (e) {
                    if (opt.isclearMap) {
                        if (opt.key) {
                            that.clearMarker(opt.key);
                        }
                        else {
                            that.clearMarkers();
                        }
                    }
    
                    let address;
                    (new AMap.Geocoder()).getAddress(e.lnglat, function (status, result) {
                        if (status === 'complete' && result.regeocode) {
                            address = {
                                address: result.regeocode.formattedAddress,
                                //lnglat: e.lnglat
                                lng: e.lnglat.getLng(),
                                lat: e.lnglat.getLat()
                            }
    
                            if (typeof opt.callback === 'function') {
                                opt.callback(e, address);
                            }
                        }
                    });
                }
            }
    
            _map.on('click', that.mapClick);
        }
    
        gaodeMap.prototype.cancleMapClick = function () {
            if (this.checkMap()) {
                return;
            }
    
            let _map = this.map;
    
            _map.off('click', this.mapClick);
            //this.map.clearEvents('click');
        }
    
        /*
         * @method
         * @desc 绑定地图搜索
         */
        gaodeMap.prototype.bindSearch = function (opt) {
            if (this.checkMap()) {
                return;
            }
    
            let _map = this.map;
    
            if (opt.isclearMap) {
                this.clearMarkers();
            }
    
            let auto = new AMap.Autocomplete({
                input: opt.inputID || "tipinput"
            });
    
            let placeSearch = new AMap.PlaceSearch({ map: _map });
    
            AMap.event.addListener(auto, "select", select);
    
            function select(e) {
                //placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name, function (status, result) {
                    // 查询成功时,result即对应匹配的POI信息
                    let pois = result.poiList.pois;
                    let address;
                    //return false;
                    if (pois.length > 0) {
                        (new AMap.Geocoder()).getAddress(pois[0].location, function (status, result) {
                            if (status === 'complete' && result.regeocode) {
                                address = {
                                    address: result.regeocode.formattedAddress,
                                    //lnglat: pois[0].location
                                    lng: pois[0].location.lng,
                                    lat: pois[0].location.lat
                                }
    
                                if (typeof opt.success === 'function') {
                                    opt.success(address);
                                }
                            }
                        });
                    }
                })
            }
        }
    
        /*
         * @method
         * @desc 获取地址
         */
        gaodeMap.prototype.getAddress = function (lnglat, callback) {
            if (this.checkMap()) {
                return;
            }
    
            (new AMap.Geocoder()).getAddress(lnglat, function (status, result) {
                if (status === 'complete' && result.regeocode) {
                    callback && callback(result.regeocode.formattedAddress);
                }
            })
        }
    
        exports('gdmap', new gaodeMap());
    })
    

      

    岁月无情催人老,请珍爱生命,远离代码!!!
  • 相关阅读:
    CF 461B Appleman and Tree
    POJ 1821 Fence
    NOIP 2012 开车旅行
    CF 494B Obsessive String
    BZOJ2337 XOR和路径
    CF 24D Broken robot
    POJ 1952 BUY LOW, BUY LOWER
    SPOJ NAPTIME Naptime
    POJ 3585
    CF 453B Little Pony and Harmony Chest
  • 原文地址:https://www.cnblogs.com/zhoushangwu/p/15006430.html
Copyright © 2011-2022 走看看