关于高德地图定位,搜索,海量点,矩形围栏绘制的使用

概述

在开发项目过程中,有许多场景需要用到定位,地图展示坐标点等多个功能,这时候就需要引入第三方地图,本文展示的是使用高德地图的示例。

引入

首先需要引入官方提供的script,需要准备事先申请的地图key值

<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

创建地图实例

AMap.Map(arg1,arg2), arg1为地图容器的ID,arg2为地图的配置内容.

var map = new AMap.Map('near_station', {
     
        resizeEnable: true,
        zoom: 12,
        rotateEnable: false,
    });

定位

在地图上定位自己的坐标,项目要求退出重进时,要求定位在退出时的位置,因代码量,暂时仅展示定位自身位置,后续可加

map.plugin('AMap.Geolocation', function() {
     
                    geolocation = new AMap.Geolocation({
     
                        showButton: false,
                        enableHighAccuracy: true,//是否使用高精度定位,默认:true
                        timeout: 10000,          //超过10秒后停止定位,默认:无穷大
                        buttonOffset: new AMap.Pixel(10, 150),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
                        zoomToAccuracy: false,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
                    });
                    map.addControl(geolocation);
                    /*var lnglat=[locallng,locallat]
                    map.panTo(lnglat);*/               //设定上次退出时为中心点
                    geolocation.getCurrentPosition();  //设定自身坐标为中心点
                    AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
                    AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
                });

搜索

输入关键字,联想相关地点

AMap.service('AMap.PlaceSearch', function () {
     
            var searchString = $("#pre-search-input").val();
            var placeSearch = new AMap.PlaceSearch({
      //构造地点查询类
                pageSize: 5,
                pageIndex: 1,
                city: "杭州", //城市,
                extensions: 'all'

            });
            //关键字查询
            placeSearch.search(searchString, function (status, result) {
     
                $('.pre-search-list').html('');
                if (result.info == 'OK') {
     
                    var html = '';
                    var pois = result.poiList.pois;
                    for (var i = 0; i < pois.length; i++) {
     
                        var item = pois[i];
                        var pca = item.pname + item.cityname + item.adname;
                        var lng = item.location.lng;
                        var lat = item.location.lat;

                        html += "
+ lng + "\" lat=\"" + lat + "\" style=\"height: 55px\">
" + item.name + "
" + pca + "
\"\"
"
} $('.pre-search-list').html(html); $(".pre-search-item").unbind('click'); $(".pre-search-item").click(function () { $('.pre-search').hide(); map.panTo([$(this).attr('lng'), $(this).attr('lat')]); var osize = new AMap.Size(32, 32); var myIcon = new AMap.Icon({ imageSize: osize, image: "../../images/position_img.png", }); var marker = new AMap.Marker({ icon: myIcon, zIndex: 1000, }); marker.setPosition([$(this).attr('lng'), $(this).attr('lat')]); marker.setMap(map); }) } else { } }); });

海量点

覆盖物过多时,使用单个覆盖物一个个加载效率过慢,此时可以使用海量点加载

var style = [{
                                             //海量点构造样式
        url: '../../images/replaceCabinet_green.png', //海量点替换图片
        anchor: new AMap.Pixel(15, 30),               //图标显示位置偏移量,基准点为图标左上角
        size: new AMap.Size(40, 40),                  //图标尺寸
    },{
     
        url: '../../images/replaceCabinet_grey.png',
        anchor: new AMap.Pixel(15, 30),
        size: new AMap.Size(40, 40),

    }];


//通过接口获取覆盖物的经纬度list
$.ajax({
     
        type: 'POST',
        url: '/XXXX/XXXXXX/XXXXXXXX',
        data: data,
        success: function (data) {
     
            list=data.data;
			$.each(list, function (i,n) {
     
                    n.lnglat = [n.lng, n.lat]
                    if(n.cabinetType==0){
     
                    	//将上面style样式添加到list中,style是个数组,所以从0开始
                    	n.style = 0;	
                    }else{
     
                    	n.style = 1;
                    }  
            })
       },
       error: function (data) {
     
            weui.alert("网络错误,请重试")
      },

矩形围栏绘制

绘制矩形围栏,项目要求绘制一个矩形围栏,要求绘制完可以知道围栏中覆盖物的数量

var rectangle;
var countsM = 0;
// 事件绑定
function StatisticalclickOn() {
     
    		console.log("开始绘制 !");
    		map.on('click', recordPoint);
    		$('#StatisticalclickOn').hide()
    		$('#StatisticalclickOff').show()
}
// 解绑事件
function StatisticalclickOff() {
     
   		console.log("清除绘制 !");
   		countsM=0;		
        map.off('click', recordPoint);
        $('#StatisticalclickOn').show()
        $('#StatisticalclickOff').hide()
        if (rectangle) {
     		
           rectangle.setMap(null)
           southWestLat = null
           southWestLng = null
           northEastLng = null
           northEastLat = null
           document.querySelector(".counts").innerText = '(0)';
           $('.input-card').hide()
        }
}


function recordPoint(e) {
     
           if (southWestLng == null && southWestLat == null) {
     
           southWestLng = e.lnglat.getLng()
           southWestLat = e.lnglat.getLat()
           var icon = new AMap.Icon({
     
               imageSize: new AMap.Size(30, 30),
               image: "../../images/location.png",
           });
               firstPoint = new AMap.Marker({
     
                      icon: icon,
                      position: [southWestLng, southWestLat],
                      offset: new AMap.Pixel(-13, -30),
              });
               firstPoint.setMap(map);
               if (rectangle) {
     
                     rectangle.setMap(null)
                     rectangle = null
               }
            } else {
     
               northEastLng = e.lnglat.getLng()
               northEastLat = e.lnglat.getLat()
               setRectangle()
               southWestLat = null
               southWestLng = null
               northEastLng = null
               northEastLat = null
               if (firstPoint) {
     
                   firstPoint.setMap(null)
                   firstPoint = null
               }
            }
}


function setRectangle() {
     
		 //获取绘制开始时的起始点
         var southWest = new AMap.LngLat(southWestLng, southWestLat)
         //获取绘制结束时的结束点
         var northEast = new AMap.LngLat(northEastLng, northEastLat)
         //给绘制点添加样式
         rectangle = new AMap.Rectangle({
     
                   bounds: bounds,
                   strokeColor: 'red',
                   strokeWeight: 6,
                   strokeOpacity: 0.5,
                   strokeDasharray: [30, 10],
                   // strokeStyle还支持 solid
                   strokeStyle: 'dashed',
                   fillColor: 'blue',
                   fillOpacity: 0.2,
                   cursor: 'pointer',
                   zIndex: 50,
         })
         rectangle.setMap(map)
         //绘制矩形围栏四角坐标
         x1 = Math.min(southWestLng, northEastLng)
         y1 = Math.min(southWestLat, northEastLat)
         x2 = Math.max(southWestLng, northEastLng)
         y2 = Math.max(southWestLat, northEastLat)
         countsM=0;
         //此alllist也是由接口中取出
         var alllist = data.data;	
         //轮询一遍接口数据,判断覆盖物是否在矩形围栏中
         //数据量过大时不宜采取此方法,后期跟进优化
         $.each(alllist, function (i, n) {
     
             if (x1 < n.lng && n.lng < x2 && y1 < n.lat && n.lat < y2) {
     
                   countsM++
             }
         })
             console.log("围栏内的覆盖物为" + countsM + "个")
}

你可能感兴趣的:(java,jquery,html)