openlayers结合百度地图API加载搜索定位功能
//每次请求之前清空上一次搜索的图层
searchPlaceLayer.getSource().clear()
$.ajax({
//url中的参数含义参见百度地图官网webAPI文档
url: 'http://api.map.baidu.com/place/v2/search?query=大唐芙蓉园®ion=西安市&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