Wechat: yu389741| Email: gisdqy@163.com

Shop:https://www.giserdqy.com/shop

openlayers结合百度地图API加载搜索定位功能


 

//每次请求之前清空上一次搜索的图层   
 searchPlaceLayer.getSource().clear()
    $.ajax({
        //url中的参数含义参见百度地图官网webAPI文档
        url: 'http://api.map.baidu.com/place/v2/search?query=大唐芙蓉园&region=西安市&page_size=40&page_num=0&output=json&ak=你的百度密钥',
        type: "GET",
        async: false,
        dataType: "jsonp",
        jsonp: "callback",
        jsonpCallback: "callback",
        contentType: "application/json;charset=utf-8",
        success: function (data) {
            console.log(data)
            if(data.status != 0){
                alert("搜索失败")
            }else if(data.results.length == 0){
                alert("暂无搜索结果")
            }else{
                $('#box').show();
                $(".search_content .place_list").html("");
                var string = "";
                for (var i = 0; i < data.results.length; i++) {
	               string += "<li><div class='bgimg'></div>" +
                            "<p class='name'>" + data.results[i].name + "</p>" +
                            "<p class='address'>" + data.results[i].address + "</p>" +
                            "<p class='area'>" + data.results[i].city + data.results[i].area + "</p>" +
                            "<div class='coordinate'>" +
                            "<p class='lonlat'>" + data.results[i].location.lng + "," + data.results[i].location.lat + "</p>" +
                            "</div>" +
                            "</li>";

                        $(".search_content .place_list").append(string);
                        //选择具体的地方城市
                        $(".search_content .place_list").unbind("click").click(function () {
                            $("#box").css("display", "none");
                            var lonlat = $(this).find(".lonlat").html();
                            var array_LonLat = lonlat.split(",");
                            for (var i = 0; i < 2; i++) {
                                array_LonLat[i] = Number(array_LonLat[i]);
                            }
//搜索出来的经纬度定位到实际地图上有偏差,是因为我使用不是在线服务百度瓦片图,所以这里只能找出偏差度数先减一下
//这里API接口返回的经纬度是4326的,又得转一下坐标系才能加载在我的底图上
                            var new_lonlat = ol.proj.transform([array_LonLat[0]-0.012653,array_LonLat[1]-0.007422], 'EPSG:4326', 'EPSG:3857')           
                            var anchor = new ol.Feature({
                                geometry: new ol.geom.Point(new_lonlat)
                            });
                            search_layer.getSource().addFeature(anchor);
                            map.getView().setCenter(new_lonlat);
                        });

                }
            }
        },
        error: function (data) {
            console.log(data)
        }
    })

在网上几乎没找到openlayers结合百度地图API来做搜索定位的资源,这种方法虽然很不靠谱,经纬度偏差还得自己减,所以找到更好的方法再改吧。

转载自:https://blog.csdn.net/du_5pet/article/details/86680562