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);