dy-house/target/dydb/app/mobile/map.js

jQuery.noConflict();
(function (window, angular, $) {
    var mp = new BMap.Map("allmap", {minZoom: 10, maxZoom: 20});
    // 初始化地图及级别（天府广场）
    mp.centerAndZoom(new BMap.Point(104.072363, 30.663316), 18);
    // 开启鼠标滚轮缩放
    mp.enableScrollWheelZoom(true);

    // 圆形覆盖物
    function CircleOverlay(point, text, mouseoverText) {
        this._point = point;
        this._text = text;
        this._overText = mouseoverText;
    }

    CircleOverlay.prototype = new BMap.Overlay();
    CircleOverlay.prototype.initialize = function (map) {
        this._map = map;
        var div = this._div = document.createElement("div");
        div.style.position = "absolute";
        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
        div.style.backgroundColor = "#00a75b";
        div.style.border = "1px solid #00a75b";
        div.style.width = '100px';
        div.style.height = '100px';
        div.style['border-radius'] = '50%';
        div.style.color = "white";
        div.style['text-align'] = 'center';
        div.style.fontSize = "12px";
        var span = this._span = document.createElement("span");

        span.style.position = 'absolute';
        span.style.width = '100%';
        span.style.top = '40px';
        span.style.left = '0px';
        //span.style.left='20px';
        span.style['white-spance'] = 'nowrap';
        div.appendChild(span);
        span.appendChild(document.createTextNode(this._text));
        var that = this;

        mp.getPanes().labelPane.appendChild(div);

        return div;
    };
    CircleOverlay.prototype.draw = function () {
        var map = this._map;
        var pixel = map.pointToOverlayPixel(this._point);
        // this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
        this._div.style.top = pixel.y - 30 + "px";
    };

    // 复杂的自定义覆盖物
    function ComplexCustomOverlay(point, text, mouseoverText) {
        this._point = point;
        this._text = text;
        this._overText = mouseoverText;
    }

    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 = BMap.Overlay.getZIndex(this._point.lat);
        div.style.backgroundColor = "#EE5D5B";
        div.style.border = "1px solid #BC3B3A";
        div.style.color = "white";
        div.style.height = "18px";
        div.style.padding = "0 2px";
        div.style.lineHeight = "18px";
        div.style.whiteSpace = "nowrap";
        div.style.MozUserSelect = "none";
        div.style.fontSize = "12px";
        var span = this._span = document.createElement("span");
        div.appendChild(span);
        span.appendChild(document.createTextNode(this._text));
        var that = this;

        var arrow = this._arrow = document.createElement("div");
        // arrow.style.background = "url(//map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
        arrow.style.position = "absolute";
        arrow.style.width = "11px";
        arrow.style.height = "10px";
        arrow.style.top = "22px";
        arrow.style.left = "10px";
        arrow.style.overflow = "hidden";
        div.appendChild(arrow);

        div.onmouseover = function () {
            this.style.backgroundColor = "#6BADCA";
            this.style.borderColor = "#0000ff";
            this.getElementsByTagName("span")[0].innerHTML = that._overText;
            arrow.style.backgroundPosition = "0px -20px";
        };

        div.onmouseout = function () {
            this.style.backgroundColor = "#EE5D5B";
            this.style.borderColor = "#BC3B3A";
            this.getElementsByTagName("span")[0].innerHTML = that._text;
            arrow.style.backgroundPosition = "0px 0px";
        };

        mp.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 - parseInt(this._arrow.style.left) + "px";
        this._div.style.top = pixel.y - 30 + "px";
    };

    //获取模块
    var app = angular.module("app.map", [
        'eccrm.angular',
        'app.mobile'
    ]);
    app.controller('Ctrl', function ($scope, AlertService, CommunityImportService) {

        $scope.condition = {};
        var marker = null;
        // 根据输入的小区或地址名称进行定位
        $scope.search = function () {
            var myGeo = new BMap.Geocoder();
            myGeo.getPoint($scope.name, function (point) {
                if (point) {
                    mp.panTo(point);
                    mp.setZoom(18);
                    if (marker == null) {
                        marker = new BMap.Marker(point);
                        mp.addOverlay(marker);
                        marker.setAnimation(BMAP_ANIMATION_BOUNCE);
                        marker.disableMassClear();
                    } else {
                        marker.setPosition(point);
                    }


                    $scope.query();
                } else {
                    AlertService.info("您填写的地址没有解析到结果!");
                }
            }, "成都市");
        };

        // 获取地图的可视范围
        mp.addEventListener('moveend', function (e) {
            $scope.query();
        });
        mp.addEventListener('zoomend', function (e) {
            $scope.query();
        });

        var initArea = false;
        $scope.query = function () {
            // 获取地图的大小
            var zoomLevel = mp.getZoom();
            if (zoomLevel <= 16) {
                // 如果小于15，则显示区域价格
                if (!initArea) {
                    $scope.queryAreaPrice();
                    initArea = true;
                }
            } else {
                // 否则显示房屋价格
                $scope.queryCommunityPrice();
            }
        };

        $scope.queryAreaPrice = function () {
            // 清除地图上所有的覆盖物
            mp.clearOverlays();
            CommunityImportService.queryAreaPrice(function (o) {
                o = o.data || [];
                var myGeo = new BMap.Geocoder();
                angular.forEach(o, function (house) {
                    myGeo.getPoint(house.areaName, function (point) {
                        if (point) {
                            var txt = house.areaName + " " + (parseInt(house.price));
                            var myCompOverlay = new CircleOverlay(point, txt, txt + "(" + house.total || 0 + "套)");
                            mp.addOverlay(myCompOverlay);
                        }
                    }, "成都市");
                });
            });
        };
        var houseMap = {};
        $scope.queryCommunityPrice = function () {
            var bs = mp.getBounds();   //获取可视区域
            var bssw = bs.getSouthWest();   //可视区域左下角
            var bsne = bs.getNorthEast();   //可视区域右上角
            var condition = $scope.condition;
            // 判断位置发生了变化没有。如果发生了变化，则重新加载数据
            if (condition.longitudeGE === bssw.lng && condition.longitudeLE === bsne.lng
                && condition.latitudeGE === bssw.lat && condition.latitudeLE === bsne.lat) {
                return;
            }
            condition.longitudeGE = bssw.lng;
            condition.longitudeLE = bsne.lng;
            condition.latitudeGE = bssw.lat;
            condition.latitudeLE = bsne.lat;

            // 清除地图上所有的覆盖物
            // mp.clearOverlays();

            // 加载新的数据
            CommunityImportService.queryHousePrices(condition, function (o) {
                o = o.data || [];
                angular.forEach(o, function (house) {
                    if (!house.longitude) {
                        return;
                    }
                    if (houseMap[house.houses]) {
                        return;
                    }
                    var txt = house.houses + " " + (house.price);
                    var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(house.longitude, house.latitude), txt, txt);
                    mp.addOverlay(myCompOverlay);
                    houseMap[house.houses] = myCompOverlay;
                });
            });
        };

        $scope.queryCommunityPrice();
    });
})(window, angular, Zepto);