标签：style blog http color os 使用 io for ar
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
简单的对qqmap进行了一些封装，方便使用。
标签：style blog http color os 使用 io for ar
原文地址：http://www.cnblogs.com/shinggang/p/3937198.html
