使用百度地图API的相关技术目录：创建覆盖物，定位到当前位置...（持续更新）

 

 

一.如何定位到当前位置：

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap"); //绑定地图Id
    var point = new BMap.Point(116.331398,39.897445); //定义一个坐标点
    map.centerAndZoom(point,12); //设置中心点和缩放层级

    //百度API自带的获取当前位置的方法（与实际坐标有偏差）
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            alert('您的位置：'+r.point.lng+','+r.point.lat);
        }
        else {
            alert('failed'+this.getStatus());
        }
    },{enableHighAccuracy: true})

    //关于状态码
    //BMAP_STATUS_SUCCESS    检索成功。对应数值“0”。
    //BMAP_STATUS_CITY_LIST    城市列表。对应数值“1”。
    //BMAP_STATUS_UNKNOWN_LOCATION    位置结果未知。对应数值“2”。
    //BMAP_STATUS_UNKNOWN_ROUTE    导航结果未知。对应数值“3”。
    //BMAP_STATUS_INVALID_KEY    非法密钥。对应数值“4”。
    //BMAP_STATUS_INVALID_REQUEST    非法请求。对应数值“5”。
    //BMAP_STATUS_PERMISSION_DENIED    没有权限。对应数值“6”。(自 1.1 新增)
    //BMAP_STATUS_SERVICE_UNAVAILABLE    服务不可用。对应数值“7”。(自 1.1 新增)
    //BMAP_STATUS_TIMEOUT    超时。对应数值“8”。(自 1.1 新增)
</script>

二.在地图上自定义标记点

            map.enableScrollWheelZoom(true);//设置地图可缩放
            //在地图上任意标记的监听事件
		    map.addEventListener("click", function(e) {
			    map.clearOverlays();
			    var str = e.point.lng +',' + e.point.lat
			    $('#centerPoint').attr('value',str);
			    $("#centerPoint").text(e.point.lng + "," + e.point.lat);
			    $('input[name="longitude"]').attr('value',e.point.lng);
			    $('input[name="latitude"]').attr('value',e.point.lat);
      
			    var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
			    map.addOverlay(marker);
		    });

三.在地图上创建覆盖物

·

假设这是可以拿到的其中一条覆盖物的数据：中心坐标点，坐标组，覆盖物的颜色，覆盖物的名字，覆盖物的id 

效果展示一下：

    var areaRes = ajax.syncGet(url,param); //请求数据
        if (areaRes.code == 200) {
            var faData = areaRes.data;
            for(var a = 0; a < faData.length; a ++ ){
                if (faData[a].regin_group) {

                    //渲染样式到styleOption对象中
                    var styleOptions = {
                        strokeColor : faData[a].region_color,
                        fillColor : faData[a].region_color,
                        fillOpacity : 0.7,
                        strokeWeight : 2,
                        strokeOpacity : 0.6
                    }

                    var point = [];
                    
                    for (var i = 0; i < faData[a].regin_group.length; i++) {
                        var lng = faData[a].regin_group[i].R;
                        var lat = faData[a].regin_group[i].Q;
                        point.push(new BMap.Point(lng,lat));
                    }


                    //创建矩形覆盖物
                    var polygon = new BMap.Polygon(point, styleOptions);
                    // polygon.disableMassClear(); //禁止用clear方法把覆盖物清除
                    map.addOverlay(polygon);

                    var opts = {
                        position: new BMap.Point(faData[a].longitude, faData[a].latitude), // 指定文本标注所在的地理位置
                        offset: new BMap.Size(0, 0), // 设置文本偏移量
                    };



                    // 创建文本标注对象
                    var label = new BMap.Label(faData[a].region_name, opts);
                    label.disableMassClear();
                    // 自定义文本标注样式
                    // label.setStyle({
                    //     color: 'blue',
                    //     borderRadius: '5px',
                    //     borderColor: '#ccc',
                    //     padding: '10px',
                    //     fontSize: '16px',
                    //     height: '30px',
                    //     lineHeight: '30px',
                    //     fontFamily: '微软雅黑'
                    // });
                    map.addOverlay(label);

                }
            }
        }

 

四. 搜索关键词

if (address) {
			map.clearOverlays();
			var local = new BMap.LocalSearch(map,{renderOptions: {map: map,  autoViewport: true,  selectFirstResult: false}});
			local.search(address);
		} else layer.msg("请输入检索地点", {icon:2});

五.获取的数据来回显地图

 //回显地图
                var lng = data.resData.yardDetails.longitude;
                var lat = data.resData.yardDetails.latitude;
                if (lat != '' && lat != null && lng != '' && lng != null && lat != 'undefined' && lng != 'undefined' ){
                    $('#house_info_map').removeClass('layui-hide');
                    var map = new BMap.Map("house_info_map");      
                    map.centerAndZoom(new BMap.Point(lng, lat), 16);  
                    var point = new BMap.Point(lng,lat);    
                    var marker = new BMap.Marker(point);  //创建标注
                    map.addOverlay(marker); //将标注添加到地图中
                    map.enableScrollWheelZoom(true); //设置鼠标滚轮缩放地图
                }