首页 > 技术文章 > qqmap 的一些操作

shinggang 2014-08-26 14:21 原文

  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进行了一些封装,方便使用。

推荐阅读