添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

项目中有个输入关键字,把搜索结果在地图上标点的需求,需要将搜索到的结果标在地图中,如果有的点不在当前地图视野中,需要将地图移动到合适的中心点,并且调整到合适层级.
分享一下其中比较关键点的函数.

* map为当前地图实例 * points_arr为地图定位点的坐标数组['108.920572,34.232179','lng,lat'] function autoRange ( map , points_arr ) { if ( points_arr . length === 0 ) { return * 先计算中心点坐标 * 1. 找出所有点中最大最小经纬度 * 2. 计算中心点坐标 * bssw 为左下角 * bsne 为右上角 * 目标点的纬度需要大于左下角点的纬度并且小于右上角的纬度 * 目标点的经度需要大于左下角点的经度并且小于右上角的经度 let max_lng = points_arr [ 0 ] . pos_bd . split ( ',' ) [ 0 ] , min_lat = points_arr [ 0 ] . pos_bd . split ( ',' ) [ 1 ] , max_lat = points_arr [ 0 ] . pos_bd . split ( ',' ) [ 1 ] , min_lng = points_arr [ 0 ] . pos_bd . split ( ',' ) [ 0 ] for ( let i = 0 ; i < points_arr . length - 1 ; i ++ ) { let lng_lat = points_arr [ i + 1 ] . pos_bd . split ( ',' ) // max = max < arr[i+1] ? arr[i+1] : max max_lng = max_lng < lng_lat [ 0 ] ? lng_lat [ 0 ] : max_lng min_lng = min_lng > lng_lat [ 0 ] ? lng_lat [ 0 ] : min_lng max_lat = max_lat < lng_lat [ 1 ] ? lng_lat [ 1 ] : max_lat min_lat = min_lat > lng_lat [ 1 ] ? lng_lat [ 1 ] : min_lat // console.log((Number(max_lng) + Number(min_lng)) / 2,(Number(max_lat)+Number(min_lat))/2); let n_lng = ( Number ( max_lng ) + Number ( min_lng ) ) / 2 let n_lat = ( Number ( max_lat ) + Number ( min_lat ) ) / 2 * 计算层级 * 百度地图比例尺与级别关系 let bs = map . getBounds ( ) //获取可视区域 let bssw = bs . getSouthWest ( ) //可视区域左下角 let bsne = bs . getNorthEast ( ) //可视区域右上角 // 百度地图比例尺与级别关系,参考https://blog.csdn.net/tjj3027/article/details/81015138 const map_rule = [ 500000 , 250000 , 100000 , 50000 , 25000 , 10000 , 5000 , 2500 , 1250 , 1000 , 500 , 250 , 100 , 2.5 , let zoomA = [ 4 , 4 ] for ( let j = 0 ; j < 2 ; j ++ ) { let viewSize , searchSize if ( j === 0 ) { viewSize = bsne . lng - bssw . lng // 当前可视宽度右上角经度-左下角经度 searchSize = ( max_lng - min_lng ) * 1.1 // 搜索结果的最大宽度 经度最大值-经度最小值 } else { viewSize = bsne . lat - bssw . lat // 当前可视高度右上角纬度-左下角纬度 searchSize = ( max_lat - min_lat ) * 1.1 // 搜索结果的最大宽度 纬度最大值-纬度最小值 let minDiff = 0 for ( let i = 0 ; i < map_rule . length ; i ++ ) { let diff = ( viewSize * map_rule [ i ] ) / map_rule [ this . map_zoom - 1 ] - searchSize if ( diff > 0 ) { if ( minDiff == 0 || diff < minDiff ) { zoomA [ j ] = i + 1 minDiff = diff let zoom = zoomA [ 0 ] > zoomA [ 1 ] ? zoomA [ 1 ] : zoomA [ 0 ] // 设定地图最大缩放层级为18,最小为4 zoom = zoom >= 18 ? 18 : zoom zoom = zoom <= 4 ? 4 : zoom * 图移动到新的中点,调整好层级 * 这里使用 map.centerAndZoom(new BMap.Point(n_lng, n_lat),zoom) * 屏幕可能会过度晃动,暂时知道原因,所以用了下面的方案 map . setZoom ( zoom ) //缩放地图 function setCenter ( ) { map . panTo ( new BMap . Point ( n_lng , n_lat ) , { noAnimation : false } ) // 设置中心点坐标 map . removeEventListener ( 'tilesloaded' , setCenter ) //地图加载完毕(地图稍微有改动就会触发) 当地图所有图块完成加载时触发此事件 map . addEventListener ( "tilesloaded" , setCenter ) ; // 调用 autoRange ( map , [ '108.920572,34.232179' , '108.900572,34.032179' ] )

结果如图(请无视我这个老旧的地图😊):
在这里插入图片描述

项目中有个输入关键字,把搜索结果在地图上标点的需求,需要将搜索到的结果标在地图中,如果有的点不在当前地图视野中,需要将地图移动到合适的中心点,并且调整到合适层级. 分享一下其中比较关键点的函数./** map为当前地图实例* points_arr为地图定位点的坐标数组['108.920572,34.232179','lng,lat']**/function autoRange(map, points_arr) { if (points_arr.length === 0) .
this.pointList=[point0,point1,point2]; var view = this.baiduMap.getViewport(eval(this.pointList)); var mapZoom = view.zoom; var centerPoint = view.center; this.baiduMap.centerAndZoom(centerPoint,mapZoom);
首先, 百度地图 是没有图层概念的,当我们需要实现加载不同类型的覆盖物,并对其分别进行控制时,便需要用到图层控制的概念. map.addOverlay();//一个一个加载覆盖物 map.removeOverlay();//删除指定覆盖物 map.clearOverlays();/ /删除所有覆盖物 if(markers[i].toString()=="[object Marker]"
<baidu-map class="map" :zoom="map.zoom" :center="{lng: map.center.lng, lat: map.center.lat}" @ready="handler" :scroll-wheel-zoom="true"> <!--比例尺控件-->
在web项目中发现这样一个问题,调用了高德 地图 API,标注了一系列 ,在网页刚打开时,显示是正常的,当发生一定程度的比例缩放时,标注 就找不到了 任务:网页端,标注 (测试 和站场)改成一直显示在 地图 上(不跟随比例尺隐藏)。 mapObj.setFitView(siteMarker);//自适应 大小 , 查询setFitView后发现,它会自适应 大小 ,有一定优 的同时,也造成了上述问题中的不便。 mapObj.setLabel(siteMarker); 后,实现了想要的效果
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; New Document &lt;/title&gt; &lt;meta n
LatLng southwest = new LatLng(39.92235, 116.380338); LatLng northeast = new LatLng(39.947246, 116.414977); $scope.initMap = function(points){ var map = new BMap.Map('pathTrackMap'); var point = new BMap.Point(113.843216,27.687262); map.centerAndZoom(point,13); // 设置 地图 map.enableDraggin...