百度地图自定义覆盖物

1、覆盖物函数

百度地图本身就有自己的图标，在开发过程中我们有时候需要自定义地图上显示的坐标图标，我们可以用图片来代替百度地图本身的这些图标，这样我们就可以跟进需求定制我们想要的效果。

iconPath：图片路径
marker: 存放标注点经纬信息的数组
sizeW：图片尺寸（宽）
sizeH：图片尺寸（高）
marker.Yc.parentNode.parentNode.style.zIndex = 500; // 设置覆盖物层级

function replaceIcon(iconPath, marker, sizeW, sizeH) {
    map.removeOverlay(marker);
    var icons = iconPath; //这个是你要显示坐标的图片的相对路径
    var icon = new BMap.Icon(icons, new BMap.Size(sizeW, sizeH)); //显示图标大小

    marker.setIcon(icon);//设置标签的图标为自定义图标
    map.addOverlay(marker);//将标签添加到地图中去
}

2、初始化地图

（1）初始化

var map = new BMap.Map("allmap",{enableMapClick:false}); //去掉地图上地点点击后出现提示信息
map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用

var mPoint = new BMap.Point(116.46, 39.92);
    map.centerAndZoom(mPoint,10); //设置默认显示城市

（2）将输入的文字转换为坐标点

var myGeo = new BMap.Geocoder();// 创建地址解析器实例
    function writePositonToInput(text) {
    // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(text, function(point){

        if (point) {
            $("#lat").val(point.lat);
            $("#lng").val(point.lng);
                }else{

        }
            }, "北京");
        /*var local = new BMap.LocalSearch(map, {
            renderOptions:{map: map}
        });
        local.search(text);*/

        //服务类 LocalSearch
}

（3）画圆圈

var circle = new BMap.Circle(point, 2500,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.1, strokeOpacity: 0.3});
    map.addOverlay(circle);

3、搜索函数

function search(text) {
    var lat = $('#lat').val(), //经度
        lng = $('#lng').val(); //纬度
        if(!text) {
            lat = ''; //经度
            lng = ''; //纬度
        }
                
        if(lat && lng) {
          
                $.ajax({
                    url: URL,
                    type: "GET",
                    async: false,
                    dataType: "json",
                    timeout: 8000,
                    success: function (res) {
                        var data = res;
                    
                        // 将地址解析结果显示在地图上,并调整地图视野
                        myGeo.getPoint(text, function(point){
                            if (point) {
                                map.clearOverlays();

                                map.centerAndZoom(point, 13);
                                /*map.addOverlay(new BMap.Marker(point));*/
                                //画个圆圈
                                var circle = new BMap.Circle(point, 2500,
                                {fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.1, strokeOpacity: 0.3});
                                map.addOverlay(circle);

                                //自己的位置做区分
                                var iconPath = '${ctxStatic}/images/position.png',
                                        point = new BMap.Point(lng, lat),
                                    marker = new BMap.Marker(point);
                                    replaceIcon(iconPath, marker, 40, 40);

                                    var point = new Array(); //存放标注点经纬信息的数组
                                    var marker = new Array(); //存放标注点对象的数组
                                    
                                    for(var i = 0; i < data.length; i ++) {
                                        var lats = data[i].lat,
                                            lngs = data[i].lng;
                                            point[i] = new BMap.Point(lngs, lats); //循环生成新的地图点
                                            marker[i] = new BMap.Marker(point[i]); //按照地图点坐标生成标记
                                            map.addOverlay(marker[i]);

                                        var iconPath = '${ctxStatic}/images/position-blue.png'; //这个是你要显示坐标的图片的相对路径
                                        replaceIcon(iconPath, marker[i], 40, 40);

                                        if(lats === lat && lngs === lng) {
                                            var iconPath = '${ctxStatic}/images/position.png';
                                            replaceIcon(iconPath, marker[i], 40, 40);
                                        }

                                    }
                                    
                                    //鼠标悬浮图片替换放大
                                    $('#resultCon').on('mouseover', 'li', function () {
                                        $(this).css('opacity', '1');

                                        var overLng = $($(this).find('input')[0]).val(),
                                            overLat = $($(this).find('input')[1]).val();

                                        for(var j = 0; j < marker.length; j ++) {
                                            var lng = marker[j].point.lng,
                                                lat = marker[j].point.lat;
                                            console.log(marker);
                                            if(lng && lat) {
                                                if(lng === parseFloat(overLng) && lat === parseFloat(overLat)) {
                                                    var iconPath = '${ctxStatic}/images/position-red.png';
                                                    replaceIcon(iconPath, marker[j], 50, 50);
                                                }
                                            }

                                        }
                                    });

                                    $('#resultCon').on('mouseout', 'li', function () {
                                        $(this).css('opacity', '0.8');
                                        var overLng = $($(this).find('input')[0]).val(),
                                            overLat = $($(this).find('input')[1]).val();

                                        for(var j = 0; j < marker.length; j ++) {
                                            var lng = marker[j].point.lng,
                                                lat = marker[j].point.lat;

                                                if(parseFloat(overLng) === parseFloat(lng) && parseFloat(overLat) === parseFloat(lat)) {
                                                    var iconPath = '${ctxStatic}/images/position-blue.png';
                                                    replaceIcon(iconPath, marker[j], 40, 40);
                                                }

                                        }
                                    });

                                }else{

                                }
                            }, "北京市");

                    
                        },
                        error: function () {

                        }

                    });
                }else {
                  
                    map.clearOverlays(); //清空地图
                
                }

            }