zoukankan      html  css  js  c++  java
  • qqmap 的一些操作

      1 ;
      2 
      3 var mapcontorl = "mapContainer";
      4 var fullscreen = false;
      5 
      6 
      7 function qqMap(options) {
      8     var that = this
      9     , _mapInfowWin = null
     10     , _newMarker = null
     11     , _newLabel = null
     12     , _oldMarker = null
     13     , _oldLabel = null
     14     , _allMarkers = []
     15     , _allLabels = []
     16     , _drowMarkers = []
     17     , _clearOldMarker = true
     18     , _allowDrag = true
     19     , _map = null
     20     , _searchService = null
     21     , _polygon = null
     22     , _newpolygon = null          
     23     , _anchor = null
     24     , _offsetSize = null
     25     , _panoContainerId = null
     26     , _controlId = null
     27     , _clickListener = null
     28     , _rightBound = null
     29     , _zoom
     30     , _centerPoint
     31     , _center
     32     ,_nearLandPolygons=[]; 
     33 
     34     this.MarkerIconTypes = 
     35     {
     36         MAP_old: '/Resource/Images/Skin/DPS/MAP_old.png',
     37         MAP_PIN: '/Resource/Images/Skin/DPS/MAP_PIN.png',
     38         MAP_PIN_other: '/Resource/Images/Skin/DPS/MAP_PIN_other.png',
     39         MAP_PIN_grey: '/Resource/Images/Skin/DPS/MAP_PIN_grey.png',
     40         MAP_PIN_purple: '/Resource/Images/Skin/DPS/MAP_PIN_purple.png'
     41     };
     42     this.markerImgPath = {
     43         centerMarker: "/Resource/Images/Skin/DPS/red-flag.png",                 //中心点图标图片
     44         preMarker: "/Resource/Images/Skin/DPS/not-sell.png",                    //预公告图标图片(非售)  
     45         notMarker: "/Resource/Images/Skin/DPS/unsold.png",                      //正式公告图标图片(未售)
     46         nowMarker: "/Resource/Images/Skin/DPS/on-sale.png",                     //已成交公告图标图片(在售)
     47         outMarker: "/Resource/Images/Skin/DPS/sold-out.png"                     //售馨
     48     };
     49     this.arrayObj = new Array();        //创建一个path数组
     50     this.tuliId = null;                 //图例DivId
     51     this.centerText = "当前土地位置";   //画圆中心点文字
     52     this.OldPoint = options.OldPoint;                                           //旧位置                                  
     53     this.oldPath = options.oldPath;                                             //旧的多边形
     54     this.Radius = 1000;
     55 
     56     _panoContainerId = options.panoContainerId == null ? "panoContainer" : options.panoContainerId;
     57     _controlId = options.controlId == null ? "mapContainer" : options.controlId;
     58     _zoom = options.zoom ? options.zoom : 12;
     59     _centerPoint = Array.FindByPropertyValue(top.DictionaryCache.City, "Id", top.Cache.cityId, false).CityCenter;
     60     _center = new qq.maps.LatLng("30.649821", "104.06697");
     61     if (_centerPoint) {
     62         _centerPoint = _centerPoint.replace('[', '').replace(']', '').split(',');
     63         _center = new qq.maps.LatLng(_centerPoint[0], _centerPoint[1]);
     64     };
     65     
     66     //地图div
     67     mapcontorl = _controlId;
     68 
     69 
     70     //初始化加载
     71     _init();
     72 
     73 
     74     
     75     
     76     //重新加载地图
     77     this.IntMap = function() {
     78         _clearOverlays(_allMarkers);
     79         _clearOverlays(_allLabels);
     80         _clearMarkerOrPolygon();
     81         var point = new qq.maps.LatLng(that.OldPoint.Lat, that.OldPoint.Lng);
     82         _oldMarker = _addMarker(that.OldPoint.Lat, that.OldPoint.Lng, true, "/Resource/Images/Skin/DPS/MAP_PIN.png", 17, 28);
     83         //旧位置不允许拖动
     84         _oldMarker.draggable = false;
     85         _oldLabel = _addLabel(that.OldPoint.Lat, that.OldPoint.Lng, "旧位置");
     86         if (that.arrayObj && that.arrayObj.length) {
     87             //拖动坐标点
     88             _moveMarker();
     89         }
     90         if (_newMarker) {
     91             _newMarker.setMap(null);
     92             _newLabel.setMap(null);
     93         }
     94         if (that.oldPath) {
     95             _polygon = new qq.maps.Polygon({
     96                 clickable: true,
     97                 editable: true,
     98                 strokeColor: "#0066CC",
     99                 strokeWeight: 1,
    100                 strokeDashStyle: "solid",
    101                 fillColor: qq.maps.Color.fromHex("#0066CC", 0.2),
    102                 map: _map
    103             });
    104             for (var i = 0; i < that.oldPath.length; i++) {
    105                 //多边形每个角添加一个坐标点
    106                 var point = new qq.maps.LatLng(that.oldPath[i].lat, that.oldPath[i].lng);
    107                 _addDrowMarker(point);
    108             }
    109         }
    110     };
    111     
    112     //获取地图范围
    113     this.getBound = function() {
    114         return _resetBounds();
    115     };
    116 
    117 
    118     /*
    119     * 在地图绘制标记
    120     * data: 数据源(包含每个marker数据的对象数组)
    121     * 每个marker对象数据格式:
    122     *   lat(必需),
    123     *   lng(必需),
    124     *   labelContent(非必需:marker label的html),
    125     *   MarkerIconTypes(非必需:qqMaps实例上具有该字典)
    126     *   polygonPath(非必需:描绘多边形的点数组)
    127     *
    128     *  Liuning  41161885@qq.com
    129     */
    130     this.addAroundPro = function (data) {
    131         
    132         this.clearNearLandMarkerObjs();
    133         
    134         for (var i = 0, len = data.length; i < len; i++) 
    135         {
    136             var marker,
    137                 label,
    138                 polyon,
    139                 o = data[i];
    140 
    141             //添加marker lable
    142             label = _addLabel(
    143                 o.lat,
    144                 o.lng,
    145                 (o.labelContent || null)
    146             );
    147             _allLabels.push(label);
    148 
    149             //绘制周边土地多边形
    150             if (o.polygonPath) {
    151                 polyon = _drawNearLandPolygon(o.polygonPath);
    152                 _nearLandPolygons.push(polyon);
    153             };
    154             
    155             //添加marker
    156             marker = _addMarker(
    157                 o.lat,
    158                 o.lng,
    159                 false,
    160                 (o.MarkerIconTypes || that.MarkerIconTypes.MAP_PIN_other),
    161                 17,
    162                 28,
    163                 false
    164             );
    165             _allMarkers.push(marker);
    166         };
    167     };
    168 
    169 
    170     /*
    171     *清除地图上的多边形(周边公告土地/周边预公告土地)
    172     */
    173     this.clearNearLandMarkerObjs = function ()
    174     {
    175         _clearOverlays(_allMarkers);
    176         _clearOverlays(_allLabels);
    177         _clearNearLandPolygon();
    178     };
    179 
    180     
    181 
    182     //清除周边项目
    183     this.clearPro = function () {
    184         _clearOverlays(_allMarkers);
    185         _clearOverlays(_allLabels);
    186     };
    187 
    188     //地图搜索(keywordId代表输入的关键字)
    189     this.getResult = function (keywordId) {
    190         //设置searchRequest
    191         var poiText = document.getElementById(keywordId).value;
    192         _searchService.setLocation(Array.FindByPropertyValue(top.DictionaryCache.City, "Id", top.Cache.cityId, false).CityName);
    193         _searchService.search(poiText);
    194     };
    195 
    196     //地图标点
    197     this.mapClick = function (GetGeomInfo) {
    198         _clearOldMarker = false;
    199         _clearNewMarkerPolygon();
    200         _newpolygon = null;
    201 
    202         //移除画图事件
    203         if (_clickListener) {
    204             qq.maps.event.removeListener(_clickListener);
    205         }
    206 
    207         _map.setOptions({ "draggableCursor": "/Resource/Images/Skin/DPS/select.cur", "draggingCursor": "/Resource/Images/Skin/DPS/select.cur" });
    208         _clickListener = qq.maps.event.addListener(_map, 'click', function (e) {
    209             var p = {};
    210             p.lat = e.latLng.lat;
    211             p.lng = e.latLng.lng;
    212 
    213             if (_newMarker) {
    214                 var nowpoint = new qq.maps.LatLng(e.latLng.lat, e.latLng.lng);
    215                 _newMarker.setPosition(nowpoint);
    216                 _newLabel.setPosition(nowpoint);
    217                 _newMarker.setMap(_map);
    218                 _newLabel.setMap(_map);
    219             }
    220             else {
    221                 _newMarker = _addMarker(e.latLng.lat, e.latLng.lng, false, "/Resource/Images/Skin/DPS/MAP_old.png", 17, 28);
    222                 _newLabel = _addLabel(e.latLng.lat, e.latLng.lng, "新位置");
    223             }
    224 
    225             //拖动坐标点
    226             qq.maps.event.addListener(_newMarker, 'position_changed', function (e) {
    227                 _newLabel.setPosition(_newMarker.position);
    228             });
    229 
    230             qq.maps.event.addListener(_newMarker, "dragend", function (e) {
    231                 GetGeomInfo(e.latLng);
    232             });
    233 
    234             //如果需要处理根据坐标的查询对应的板块等基本信息(GetGeomInfo为页面方法)
    235             if (GetGeomInfo) {
    236                 GetGeomInfo(p);
    237             }
    238         });
    239     };
    240     
    241     this.ClearAllFlagsOnMap = function () {
    242         _clearMarkerOrPolygon();
    243     };
    244 
    245     //画多边形
    246     this.drawPolygon = function () {
    247         _clearNewMarkerPolygon();
    248         that.arrayObj = new Array();
    249         _map.setOptions({ "draggableCursor": "hand" });
    250 
    251         _newpolygon = new qq.maps.Polygon({
    252             clickable: true,
    253             editable: true,
    254             strokeColor: "#0066CC",
    255             strokeWeight: 1,
    256             strokeDashStyle: "solid",
    257             fillColor: qq.maps.Color.fromHex("#0066CC", 0.2),
    258             map: _map
    259         });
    260 
    261         //移除画图事件
    262         if (_clickListener) {
    263             qq.maps.event.removeListener(_clickListener);
    264         }
    265 
    266         _clickListener = qq.maps.event.addListener(_map, "click", function (e) {
    267             var point = new qq.maps.LatLng(e.latLng.getLat(), e.latLng.getLng());
    268             _addDrowMarker(point, _clickListener, _newpolygon);
    269         });
    270     };
    271 
    272     //显示圆
    273     this.drawCircle = function (params) {
    274         try {
    275             if (hasCenter) {
    276                 if (!hasCenter) {
    277                     that.centerText = "";
    278                 }
    279             }
    280         } catch (e) {
    281 
    282         };
    283         _center = new qq.maps.LatLng(that.OldPoint.Lat, that.OldPoint.Lng);
    284         var circle = new qq.maps.Circle({
    285             map: _map,
    286             center: _center,
    287             radius: that.Radius,
    288             radius: 1000,
    289             strokeColor: "#0066CC",
    290             strokeWeight: 1,
    291             strokeDashStyle: "solid",
    292             fillColor: qq.maps.Color.fromHex("#0066CC", 0.2)
    293         });
    294         _oldMarker.setMap(null);
    295         _oldLabel.setMap(null);
    296         _allowDrag = false;
    297         _anchor = new qq.maps.Point(5, 45);
    298         //中心坐标
    299         _map.setCenter(_center);
    300         var centerMarker = _addMarker(_center.lat, _center.lng, true, "/Resource/Images/Skin/DPS/red-flag.png", 42, 53);
    301         _offsetSize = new qq.maps.Size(-35, 2);
    302         var clabel = _addLabel(_center.lat, _center.lng, "<span style='color:red;'>" + that.centerText + "</span>");
    303         if (params && (params.UseAreaMu || params.LLandUseType)) {
    304             centerMarker.setTitle("净用地面积:" + params.UseAreaMu + "亩,土地用途分类:" + params.LLandUseType);
    305         }
    306         //绘制圆半径
    307         _rightBound = new qq.maps.LatLng(_center.getLat(), circle.getBounds().getNorthEast().getLng());
    308         var polyline = new qq.maps.Polyline({
    309             path: [_center, _rightBound],
    310             strokeWeight: 1,
    311             editable: false,
    312             map: _map
    313         });
    314         //显示半径文字
    315         _offsetSize = null;
    316         var label = _addLabel(_rightBound.lat, _rightBound.lng, "1000米");
    317         qq.maps.event.addListener(label, 'mouseover', function (e) {
    318             _map.setOptions({ "draggableCursor": "hand" });
    319         });
    320         //最右边的点
    321         _anchor = null;
    322         _allowDrag = true;
    323         var rightMarker = _addMarker(_rightBound.lat, _rightBound.lng, false, "http://s.map.soso.com/themes/default/img/dot.png?v=v3.3.786", 12, 12);
    324         qq.maps.event.addListener(rightMarker, 'position_changed', function (e) {
    325             var nowPoint = new qq.maps.LatLng(e.target.position.lat, e.target.position.lng);
    326             var num = parseInt(_center.distanceTo(nowPoint));
    327             circle.setRadius(num);
    328             label.setContent(num + "米");
    329             label.setPosition(nowPoint);
    330             polyline.setPath([_center, nowPoint]);
    331             that.Radius = num;
    332         });
    333 
    334         qq.maps.event.addListener(rightMarker, 'mouseup', function (e) {
    335             if (getData) {
    336                 _rightBound = new qq.maps.LatLng(e.latLng.lat, e.latLng.lng);
    337                 getData();
    338             }
    339         });
    340         //图例
    341         //显示提示信息
    342         var customShowDiv = document.getElementById(that.tuliId);
    343         _map.controls[qq.maps.ControlPosition.BOTTOM_RIGHT].push(customShowDiv);
    344     };
    345     
    346     //根据中心点、右边的点和半径获取像素距离
    347     this.getPath = function () {
    348         var projection = _map.getProjection();
    349         var point = projection.fromLatLngToPoint(_center); //projection.fromLatLngToPoint(center, map.getZoom());
    350         var rightpoint = projection.fromLatLngToPoint(_rightBound); //projection.fromLatLngToPoint(rightBound, map.getZoom());
    351         var len = point.distanceTo(rightpoint);
    352         return _generateCirclePoints(_map, _center, len);
    353     };
    354 
    355     //土地或者项目关联的标点
    356     this.DrawProOrLandMarker = function (type, data) {
    357         var infoTpl = $("#divInfolandTemplate").comment();
    358         var labelText = "", nlabel;
    359         if (type == "land") {
    360             infoTpl = $("#divInfolandTemplate").comment();
    361             labelText = "<div style='text-align:center;color:#000;font-family:微软雅黑,宋体;font-size:11px;cursor:pointer;*cursor:hand;'>" + data.ShowT.toString() + "亩" + "</div>";
    362             nlabel = _addLabel(data.lat, data.lng, labelText);
    363         } else {
    364             infoTpl = $("#divInfoprojectTemplate").comment();
    365             labelText = "<div style='text-align:center;color:#000;font-family:微软雅黑,宋体;font-size:11px;cursor:pointer;*cursor:hand;'>" + data.ProjectSquare + "亩" + "</div>";
    366             if (data.ProjectSquare) {
    367                 nlabel = _addLabel(data.lat, data.lng, labelText);
    368             }
    369         }
    370 
    371         _allowDrag = false;
    372         var nmarker = _addMarker(data.lat, data.lng, false, data.marker, 32, 42);
    373         _offsetSize = new qq.maps.Size(18, -30);
    374 
    375         if (nlabel) {
    376             qq.maps.event.addListener(nlabel, 'click', function (args) {
    377                 nlabel.setStyle("cursor", "hand");
    378             });
    379             nlabel.DataItem = data;
    380             qq.maps.event.addListener(nlabel, 'click', function (args) {
    381                 var data = args.target.DataItem;
    382                 if (data.BaseInfoName && data.BaseInfoId) {
    383                     infoTpl = infoTpl.replace("style='display:none'", "");
    384                 }
    385                 _mapInfowWin.open();
    386                 _mapInfowWin.setContent(String.FormatByEmptyValue(infoTpl, "--", data));
    387                 _mapInfowWin.setPosition(new qq.maps.LatLng(data.lat, data.lng));
    388             });
    389             _allLabels.push(nlabel);
    390         }
    391 
    392         nmarker.DataItem = data;
    393         qq.maps.event.addListener(nmarker, 'click', function (args) {
    394             var data = args.target.DataItem;
    395             if (data.BaseInfoName && data.BaseInfoId && type == "land") {
    396                 infoTpl = infoTpl.replace("style='display:none'", "");
    397             }
    398             _mapInfowWin.open();
    399             _mapInfowWin.setContent(String.FormatByEmptyValue(infoTpl, "--", data));
    400             _mapInfowWin.setPosition(new qq.maps.LatLng(data.lat, data.lng));
    401         });
    402         _allMarkers.push(nmarker);
    403     };
    404     
    405     //清空页面填充的数据
    406     this.ClearMarkerAndLabel = function () {
    407         _clearOverlays(_allMarkers);
    408         _clearOverlays(_allLabels);
    409     };
    410     
    411     //关闭弹出窗口
    412     this.closeWin = function() {
    413         _mapInfowWin.close();
    414     };
    415     
    416     //列表选择行后地图显示对应的项
    417     this.openWin = function(type, data) {
    418         var infoTpl = "";
    419         if (type == "land") {
    420             infoTpl = $("#divInfolandTemplate").comment();
    421             if (data.BaseInfoName && data.BaseInfoId) {
    422                 infoTpl = infoTpl.replace("style='display:none'", "");
    423             }
    424         } else if (type == "project") {
    425             infoTpl = $("#divInfoprojectTemplate").comment();
    426         }
    427 
    428         _mapInfowWin.open();
    429         _mapInfowWin.setContent(String.FormatByEmptyValue(infoTpl, "--", data));
    430         _mapInfowWin.setPosition(new qq.maps.LatLng(data.lat, data.lng));
    431     };
    432     
    433     //更新marker状态
    434     this.ChangeMarker = function(i, data) {
    435         var marker = _allMarkers[i];
    436         marker.DataItem = data;
    437         var anchor0 = _anchor == null ? new qq.maps.Point(16, 36) : _anchor;
    438         var size0 = new qq.maps.Size(32, 40),
    439             origin0 = new qq.maps.Point(0, 0),
    440             icon0 = new qq.maps.MarkerImage(data.marker, size0, origin0, anchor0);
    441         marker.setIcon(icon0);
    442     };
    443     
    444     //或者两个经纬度之间的距离
    445     this.getDistanceByLatLng = function (lat, lng) {
    446         var latLng = new qq.maps.LatLng(lat, lng);
    447         return _center.distanceTo(latLng);
    448     };
    449     
    450     //定位地图中心坐标点
    451     this.setCenterMap = function (lat, lng) {
    452         if (lat && lng) {
    453             _map.setCenter(new qq.maps.LatLng(lat, lng));
    454         }
    455         else {
    456             if (_centerPoint) {
    457                 _map.setCenter(new qq.maps.LatLng(_centerPoint[0], _centerPoint[1]));
    458                 _map.setZoom(11);
    459             };
    460         }
    461     };
    462 
    463     /*
    464     *Liuning
    465     *获取当前地图视野范围内的中心店,返回一个数组,arr[0]:Lat  arr[1]: Lng
    466     */
    467     this.getMapViewCenter = function () {
    468         var arr = [];
    469         var center = _map.getCenter();
    470         arr.push(center.getLat());
    471         arr.push(center.getLng());
    472         return arr;
    473     };
    474 
    475     
    476 
    477     //加载地图操作
    478     function _init() {
    479         _map = new qq.maps.Map(document.getElementById(_controlId), {
    480             center: _center,
    481             zoom: _zoom,
    482             disableDefaultUI: false
    483         });
    484         //地图检索服务
    485         _searchService = new qq.maps.SearchService({
    486             map: _map
    487         });
    488         //全屏
    489         new qq.maps.Control(
    490         {
    491             content: "<span class='map-btn fullScreen' id='J_FullScreen' onclick='SetFullScreen()'>全屏</span>",
    492             align: qq.maps.ALIGN.TOP_RIGHT,
    493             margin: new qq.maps.Size(5, 10),
    494             zoom: _zoom,
    495             map: _map
    496         });
    497         //切换地图类型
    498         qq.maps.event.addListener(_map, 'maptypeid_changed', function (e) {
    499             if (_map.getMapTypeId() == "街景") {
    500                 $("#" + _controlId + " > div > div:lt(3)").hide();
    501                 $("#" + _controlId).children().append($("#" + _panoContainerId));
    502                 $("#" + _panoContainerId).show();
    503             }
    504             else {
    505                 $("#" + _controlId + " > div > div:lt(3)").show();
    506                 $("#" + _panoContainerId).hide();
    507             }
    508         });
    509         //旧位置
    510         if (options.OldPoint) {
    511             _oldMarker = _addMarker(options.OldPoint.Lat, options.OldPoint.Lng, true, "/Resource/Images/Skin/DPS/MAP_PIN.png", 17, 28);
    512             _oldMarker.draggable = false;
    513             _oldLabel = _addLabel(options.OldPoint.Lat, options.OldPoint.Lng, "旧位置");
    514             if (options.oldPath) {
    515                 //拖动坐标点
    516                 _moveMarker();
    517             }
    518         };
    519         //旧的多边形
    520         if (options.oldPath) {
    521             _polygon = new qq.maps.Polygon({
    522                 clickable: true,
    523                 editable: true,
    524                 strokeColor: "#0066CC",
    525                 strokeWeight: 1,
    526                 strokeDashStyle: "solid",
    527                 fillColor: qq.maps.Color.fromHex("#0066CC", 0.2),
    528                 map: _map
    529             });
    530             for (var i = 0; i < options.oldPath.length; i++) {
    531                 //多边形每个角添加一个坐标点
    532                 var point = new qq.maps.LatLng(options.oldPath[i].lat, options.oldPath[i].lng);
    533                 _addDrowMarker(point);
    534             };
    535         };
    536         qq.maps.event.addListener(_map, 'bounds_changed', _resetBounds);
    537 
    538         //地图弹出窗口
    539         _mapInfowWin = new soso.maps.InfoWindow({
    540             map: _map
    541         });
    542         //地图弹出窗口关闭
    543         soso.maps.event.addListener(_map, 'click', function () {
    544             _mapInfowWin.close();
    545         });
    546     };
    547 
    548 
    549     //获取当前地图范围位置
    550     function _resetBounds() {
    551         var bounds = _map.getBounds();
    552         var bound = {};
    553         if (bounds) {
    554             bound.NorthEast_X = bounds.getNorthEast().getLng();
    555             bound.NorthEast_Y = bounds.getNorthEast().getLat();
    556             bound.SouthWest_X = bounds.getSouthWest().getLng();
    557             bound.SouthWest_Y = bounds.getSouthWest().getLat();
    558         }
    559         return bound;
    560     };
    561 
    562     /* 添加marker
    563     *lat 纬度
    564     *lng 经度
    565     *moveToCenter  是否设置为中心点
    566     *ImgUrl 图片路径
    567     *width 图片宽度
    568     *height 图片高度
    569     *allowDrag是否允许拖动
    570     */
    571     function _addMarker(lat, lng, moveToCenter, imgUrl, width, height, allowDrag)
    572     {
    573         //使用默认的icon
    574         var anchor0 = _anchor||new qq.maps.Point(width / 2, height - 4);
    575         var size0 = new qq.maps.Size(width, height);
    576         var origin0 = new qq.maps.Point(0, 0);
    577         var icon0 = new qq.maps.MarkerImage(imgUrl, size0, origin0, anchor0);
    578         var marker0 = new qq.maps.Marker({
    579             icon: icon0,
    580             map: _map,
    581             draggable: allowDrag==null ? _allowDrag:allowDrag,
    582             position: new qq.maps.LatLng(lat, lng)
    583         });
    584         //设置marker点击事件:点击时隐藏label ,再点击就显示label
    585         qq.maps.event.addListener(marker0, "click", function (e)
    586         {
    587             var label=null;
    588             var latLng = e.latLng;
    589             
    590             for (var i = 0, len = _allMarkers.length; i < len; i++) {
    591                 label = _allLabels[i];
    592                 if (latLng.equals(label.getPosition())) break;
    593             };
    594 
    595             if (!label) return;
    596 
    597             var visible = label.getVisible()
    598             if (visible) {
    599                 label.setVisible(false);
    600             } else {
    601                 label.setVisible(true);
    602             }
    603         });
    604         
    605         moveToCenter && _map.setCenter(new qq.maps.LatLng(lat, lng));
    606         return marker0;
    607     };
    608 
    609     /* 添加lable
    610     *lat 纬度
    611     *lng 经度
    612     *showText  显示的文字
    613     */
    614     function _addLabel(lat, lng, showText) {
    615         var size = new qq.maps.Size(10, -25);
    616         if (_offsetSize) size = _offsetSize;
    617         
    618         var label = new qq.maps.Label({
    619             position: new qq.maps.LatLng(lat, lng),
    620             map: _map,
    621             content: showText.toString(),
    622             offset: size
    623         });
    624         
    625         return label;
    626     };
    627     
    628     /*
    629     *绘制周边土地多边形
    630     *data:用于描绘多边形的点数组
    631     */
    632     function _drawNearLandPolygon(data) {
    633         var path = [];
    634         for (var i = 0; i < data.length; i++) {
    635             var item = data[i];
    636             var point = new qq.maps.LatLng(item.lat, item.lng);
    637             path.push(point);
    638         };
    639         var _polygon = new qq.maps.Polygon({
    640             path: path,
    641             clickable: true,
    642             editable: false,
    643             strokeColor: "#0066CC",
    644             strokeWeight: 1,
    645             strokeDashStyle: "solid",
    646             map: _map
    647         });
    648 
    649         return _polygon;
    650     };
    651 
    652     function _addDrowMarker(point, listener, polygonSource) {
    653         var marker = _addMarker(point.lat, point.lng, false, "/Resource/Images/Skin/DPS/map_ponit.png", 8, 8);
    654 
    655         _drowMarkers.push(marker);
    656         that.arrayObj.push(point);
    657 
    658         if (!polygonSource) {
    659             polygonSource = _polygon;
    660         }
    661 
    662         polygonSource.setPath(that.arrayObj);
    663         marker.setTitle(that.arrayObj.length - 1);
    664 
    665         //停止画多边形
    666         var dlistener = qq.maps.event.addListener(marker, "dblclick", function (e) {
    667             var newLabelcontent = "新位置【" + (qq.maps.geometry.spherical.computeArea(that.arrayObj) * 3 / 2000).toFixed(2) + "亩】";
    668             var point = polygonSource.getBounds().getCenter();
    669             if (_newMarker) {
    670                 _newMarker.setPosition(point);
    671                 _newLabel.setPosition(point);
    672                 _newMarker.setMap(_map);
    673                 _newLabel.setMap(_map);
    674                 _newLabel.content = newLabelcontent;
    675             } else {
    676                 _newMarker = _addMarker(point.lat, point.lng, false, "/Resource/Images/Skin/DPS/MAP_old.png", 17, 28);
    677                 _newLabel = _addLabel(point.lat, point.lng, newLabelcontent);
    678             }
    679 
    680             qq.maps.event.addListener(_newMarker, "dragend", function (e) {
    681                 GetGeomInfo(e.latLng, that.arrayObj);
    682             });
    683 
    684             //移除画图事件
    685             if (listener) {
    686                 qq.maps.event.removeListener(listener);
    687             }
    688 
    689             qq.maps.event.removeListener(dlistener);
    690             _moveMarker();
    691             if (GetGeomInfo) {
    692                 GetGeomInfo(point, that.arrayObj);
    693             };
    694         });
    695 
    696 
    697         //修改多边形
    698         qq.maps.event.addListener(marker, 'position_changed', function (e) {
    699             //debugger;
    700             var newLabelcontent = "新位置【" + (qq.maps.geometry.spherical.computeArea(that.arrayObj) * 3 / 2000).toFixed(2) + "亩】";
    701             var point = polygonSource.getBounds().getCenter();
    702             if (!_newMarker) {
    703                 _newMarker = _addMarker(point.lat, point.lng, false, "/Resource/Images/Skin/DPS/MAP_old.png", 17, 28);
    704                 _newLabel = _addLabel(point.lat, point.lng, newLabelcontent);
    705             } else {
    706                 _newMarker.setPosition(point);
    707                 _newLabel.setPosition(point);
    708                 _newMarker.setMap(_map);
    709                 _newLabel.setMap(_map);
    710                 _newLabel.content = newLabelcontent;
    711             }
    712             if (_oldMarker) {
    713                 _oldMarker.setVisible(false);
    714                 _oldLabel.setVisible(false);
    715             }
    716             _moveMarker();
    717             var index = marker.getTitle();
    718             that.arrayObj[index].lat = marker.position.lat;
    719             that.arrayObj[index].lng = marker.position.lng;
    720             polygonSource.setPath(that.arrayObj);
    721             if (GetGeomInfo) {
    722                 GetGeomInfo(point, that.arrayObj);
    723             };
    724         });
    725     };
    726 
    727     //清除地图上的标记
    728     function _clearOverlays(overlays) {
    729         var overlay;
    730         while (overlay = overlays.pop()) {
    731             overlay.setMap(null);
    732         }
    733     };
    734 
    735     //清除多边形或者清除标点
    736     function _clearMarkerOrPolygon() {
    737 
    738         if (_newpolygon) {
    739             _clearOverlays(_drowMarkers);
    740             _drowMarkers = [];
    741             _newpolygon.setMap(null);
    742             _newpolygon.path = null;
    743         }
    744         if (_polygon) {
    745             _clearOverlays(_drowMarkers);
    746             _drowMarkers = [];
    747             _polygon.setPath([]);
    748             _polygon = null;
    749         }
    750         if (_newMarker) {
    751             _newMarker.setMap(null);
    752             _newLabel.setMap(null);
    753         }
    754         if (_oldMarker && _clearOldMarker) {
    755             _oldMarker.setMap(null);
    756             _oldLabel.setMap(null);
    757         }
    758 
    759         _clearOverlays(_allMarkers);
    760         _clearOverlays(_allLabels);
    761     };
    762 
    763     function _clearNewMarkerPolygon() {
    764         if (_newMarker) {
    765             _newMarker.setMap(null);
    766             _newLabel.setMap(null);
    767         }
    768         if (_newpolygon) {
    769             _clearOverlays(_drowMarkers);
    770             _drowMarkers = [];
    771             _newpolygon.setMap(null);
    772             _newpolygon = null;
    773         }
    774     };
    775 
    776     function _clearNearLandPolygon()
    777     {
    778         while (o = _nearLandPolygons.pop()) {
    779             if (!o) break;
    780             o.setMap(null);
    781             o.setPath([]);
    782         }
    783     };
    784 
    785     //拖动坐标点
    786     function _moveMarker() {
    787         if (_newMarker) {
    788             qq.maps.event.addListener(_newMarker, 'position_changed', function (e) {
    789                 _newLabel.setPosition(_newMarker.position);
    790             });
    791         }
    792         if (_oldMarker) {
    793             qq.maps.event.addListener(_oldMarker, 'position_changed', function (e) {
    794                 _oldLabel.setPosition(_oldMarker.position);
    795             });
    796         }
    797     };
    798 
    799     /// <summary>以指定坐标为中心计算圆指定精度下的所有坐标点</summary>
    800     /// <param name="map" type="Map">SOSO地图对象(V2.0)</param>
    801     /// <param name="center" type="LatLng">中心坐标</param>
    802     /// <param name="r" type="Number">圆的半径</param>
    803     /// <param name="percision" type="Number">计算圆周坐标时的精度(每隔多少弧度计算一个点,默认0.5)</param>
    804     function _generateCirclePoints(map, center, r, percision) {
    805         if (!map || !center || r <= 0) {
    806             return null;
    807         };
    808         if (!percision || percision < 0) {
    809             percision = 1;
    810         };
    811         var points = [];
    812         var pointstr = "";
    813         var zoom = map.getZoom();
    814         var projection = map.getProjection();
    815         var latLngOffset = function (latLng, offsetX, offsetY) {
    816             var point = projection.fromLatLngToPoint(latLng); // projection.fromLatLngToPoint(latLng, zoom);
    817             point.x += offsetX;
    818             point.y += offsetY;
    819             return projection.fromPointToLatLng(point, zoom);
    820         };
    821 
    822         for (var angle = 0; angle <= 360; angle += percision) {
    823             var x, y;
    824             var point;
    825             var rad = angle * Math.PI / 180;
    826             y = Math.abs(Math.sin(rad) * r);
    827             x = Math.abs(Math.cos(rad) * r);
    828             point = latLngOffset(center, x, y);
    829             if (angle <= 90) {
    830                 point = latLngOffset(center, x, 0 - y, zoom);
    831             }
    832             else if (angle > 90 && angle <= 180) {
    833                 point = latLngOffset(center, 0 - x, 0 - y, zoom);
    834             }
    835             else if (angle > 180 && angle <= 270) {
    836                 point = latLngOffset(center, 0 - x, y, zoom);
    837             }
    838             else if (angle > 270 && angle <= 360) {
    839                 point = latLngOffset(center, x, y, zoom);
    840             };
    841             pointstr += point.lng + " " + point.lat + ",";
    842             points.push(point);
    843         };
    844 
    845         pointstr += points[0].lng + " " + points[0].lat;
    846         return pointstr;
    847     };
    848 };
    849 
    850 
    851 //全屏操作
    852 function SetFullScreen() {
    853     if (!fullscreen) {
    854         fullscreen = true;
    855         $("#" + mapcontorl).fullScreen({ type: "max" });
    856         $("#J_FullScreen").removeClass().addClass("map-btn exit").text("退出");
    857     }
    858     else {
    859         fullscreen = false;
    860         $("#" + mapcontorl).fullScreen({ type: "min" });
    861         $("#J_FullScreen").removeClass().addClass("map-btn fullScreen").text("全屏");
    862 
    863         try {
    864             if (!fullScreenFlag) {
    865                 $mapContainer.width(mapW1);
    866             }
    867             else {
    868                 $mapContainer.width(mapW2);
    869             }
    870         } catch (e) {
    871 
    872         }
    873 
    874     };
    875 };
    876    
    View Code

    简单的对qqmap进行了一些封装,方便使用。

  • 相关阅读:
    VUE笔记-如何处理vue create demo时候,不能使用上下按键选择?
    帝国CMS之PC端上新栏目后,移动端无法同步,添加内容编辑页打开空白的处理方法
    帝国cms:迁移站点后,配置多端访问显示“访问端目录不存在”
    如何批量删除帝国CMS中同一前缀的数据表?
    宝塔插件"网站监控报表"错误日志显示大量不存在的链接,处理方法及流程
    mysql删除重复数据只保留一条
    VirtualBox 中 discuzq不能添加软链接的处理方法
    mysql8 source 导入大文件时 经常意外中断 且无法再链接断续 解决方法先设置 set names utf8;
    discuzq Virtualbox 虚拟机 在共享文件夹设置软链接 in 报错 Protocol error问题
    是的,奈学教育一周年了!
  • 原文地址:https://www.cnblogs.com/shinggang/p/3937198.html
Copyright © 2011-2022 走看看