百度地图WebAPI
调用百度地图WebAPI实现如下周边配套效果
可以点 这里 查看效果
首先要去百度地图开放平台 申请为百度开发者,然后得到服务秘钥(ak)
WEB服务API: http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-placeapi
这里还有JS代码和html页面代码的示例: http://lbsyun.baidu.com/jsdemo.htm#i1_1
有了这两个文档和示例,我们就可以开始我们的开发了。
直接上代码
@*地图模块*@
<script type="text/javascript">
$(function () {
var city = "成都市西南交大";
var addr = $(".map-content").attr("name");
var map, latitude, longitute;
var MapTitleId //地图面板ID
var keyword ="交通"; //一级面板查询字
var subKeyword = "地铁站" //二级面板查询字
var iconURL = "";
var pointArray = new Array(); //周边点经纬度Point对象数组
var ServiceArray = new Array(); //周边点详细信息
//var DistanceArr = new Array(); //周边点到中心点距离
function initMap() {
//createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function setMapEvent() {
map.enableScrollWheelZoom();
map.enableKeyboard();
map.enableDragging();
map.enableDoubleClickZoom()
}
function addClickHandler(target, window) {
target.addEventListener("click", function () {
target.openInfoWindow(window);
});
}
function addMapOverlay() {
}
//向地图添加控件
function addMapControl() {
var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: 0 });
map.addControl(navControl);
}
// 复杂的自定义覆盖物
function ComplexCustomOverlay(point, text, mouseoverText) {
this._point = point;
this._text = text;
this._overText = mouseoverText;
}
ComplexCustomOverlay.prototype = new BMap.Overlay();
ComplexCustomOverlay.prototype.initialize = function (map) {
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#EE5D5B";
div.style.border = "1px solid #BC3B3A";
div.style.color = "white";
div.style.height = "33px";
div.style.padding = "2px";
div.style.lineHeight = "28px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "16px"
var span = this._span = document.createElement("span");
div.appendChild(span);
span.appendChild(document.createTextNode(this._text));
var that = this;
var arrow = this._arrow = document.createElement("div");
arrow.style.background = "url(http://map.baidu.com/fwmap/upload/r/map/fwmap/static/house/images/label.png) no-repeat";
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "10px";
arrow.style.top = "32px";
arrow.style.left = "35px";
arrow.style.overflow = "hidden";
div.appendChild(arrow);
div.onmouseover = function () {
this.style.backgroundColor = "#6BADCA";
this.style.borderColor = "#0000ff";
this.getElementsByTagName("span")[0].innerHTML = that._overText;
arrow.style.backgroundPosition = "0px -20px";
}
div.onmouseout = function () {
this.style.backgroundColor = "#EE5D5B";
this.style.borderColor = "#BC3B3A";
this.getElementsByTagName("span")[0].innerHTML = that._text;
arrow.style.backgroundPosition = "0px 0px";
}
map.getPanes().labelPane.appendChild(div);
return div;
}
ComplexCustomOverlay.prototype.draw = function () {
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
this._div.style.top = pixel.y - 30 + "px";
}
var txt = addr, mouseoverTxt = txt + " " + parseInt(Math.random() * 1000, 10) + "套";
//获取覆盖物位置
function attribute(e) {
var p = e.target;
alert("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);
}
//地图面板点击事件 第一级
$(".aroundType li").click(function () {
$(".aroundType li").each(function (index, item) {
$(this).attr("class", "LOGCLICK");
})
$(".itemTagBox").each(function (index, item) {
$(this).attr("style", "display:none");
})
$(this).attr("class", "LOGCLICK selectTag");
MapTitleId = $(this).attr('data-bl');
$("#" + MapTitleId).attr("style", "");
keyword = $(this).text(); //一级选择
//alert(MapTitleId);
//每个一级标签下第一个二级标签被点击
var s = "#" + MapTitleId + " div:first";
$(s).click();
})
//起始设置交通地铁站
//$('.aroundType li:first').click();
//地图点击事件 第二级
$("#traffic div").click(function () {
$("#" + MapTitleId + " div").each(function (index, item) {
$(this).attr("class", "tagStyle LOGCLICK");
})
$(this).attr("class", "tagStyle LOGCLICK select");
subKeyword = $(this).text(); //二级选择
searchData(keyword + subKeyword);
})
$("#education div").click(function () {
$("#" + MapTitleId + " div").each(function (index, item) {
$(this).attr("class", "tagStyle LOGCLICK");
})
$(this).attr("class", "tagStyle LOGCLICK select");
subKeyword = $(this).text(); //二级选择
searchData(keyword + subKeyword);
})
$("#medical div").click(function () {
$("#" + MapTitleId + " div").each(function (index, item) {
$(this).attr("class", "tagStyle LOGCLICK");
})
$(this).attr("class", "tagStyle LOGCLICK select");
subKeyword = $(this).text(); //二级选择
searchData(keyword + subKeyword);
})
$("#shopping div").click(function () {
$("#" + MapTitleId + " div").each(function (index, item) {
$(this).attr("class", "tagStyle LOGCLICK");
})
$(this).attr("class", "tagStyle LOGCLICK select");
subKeyword = $(this).text(); //二级选择
searchData(keyword + subKeyword);
})
$("#life div").click(function () {
$("#" + MapTitleId + " div").each(function (index, item) {
$(this).attr("class", "tagStyle LOGCLICK");
})
$(this).attr("class", "tagStyle LOGCLICK select");
subKeyword = $(this).text(); //二级选择
searchData(keyword + subKeyword);
})
$("#entertainment div").click(function () {
$("#" + MapTitleId + " div").each(function (index, item) {
$(this).attr("class", "tagStyle LOGCLICK");
})
$(this).attr("class", "tagStyle LOGCLICK select");
subKeyword = $(this).text(); //二级选择
searchData(keyword + subKeyword);
})
//根据一二级关键字请求百度API
function searchData(key) {
$.ajax({
url: "http://api.map.baidu.com/geocoder/v2/",
dataType: "jsonp",
type: "get",
async:false,
data: { address: addr, output: "json", ak: "你的ak" },
success: function (data) {
//alert(addr);
longitute = data.result.location.lng.toString();
latitude = data.result.location.lat.toString();
// 百度地图API功能
//alert(latitude + "," + longitute);
map = new BMap.Map("map-box-left"); // 创建Map实例
initMap();
var new_point = new BMap.Point(longitute, latitude);
map.centerAndZoom(new_point, 16); //参数调整比例
map.enableScrollWheelZoom();
//var marker = new BMap.Marker(new_point); // 创建标注
//map.addOverlay(marker); // 将标注添加到地图中
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
//自定义标注
var myCompOverlay = new ComplexCustomOverlay(new_point, addr, mouseoverTxt);
map.addOverlay(myCompOverlay);
//map.panTo(new_point);
//添加周边点
addPoint(longitute, latitude, key);
},
error: function (data) {
alert("检查网络和地址是否正确!");
}
});
}
//添加周边点
function addPoint(longitute, latitude, keyword) {
$.ajax({
url: "http://api.map.baidu.com/place/v2/search",
dataType: "jsonp",
type: "get",
async: false,
data: { query: keyword, location: latitude + "," + longitute, radius: 2000,scope:2,filter:"sort_name:distance|sort_rule:1", output: "json", ak: "9pwN0orTUYNywM8HBvFC9qSgGpIGHtKO" },
success: function (data) {
ServiceArray = data.results;
//周边点到中心点距离
showService(ServiceArray);
//遍历周边
for (var i = 0; i < data.results.length; i++) {
var address = data.results.address;
var lat = data.results[i].location.lat.toString();
var lng = data.results[i].location.lng.toString();
var name = data.results[i].name;
//console.log(lat + "," + lng);
//创建图标
pointArray[i] = new BMap.Point(lng, lat);
//var marker = new BMap.Marker(pt); // 创建标注
//map.addOverlay(marker); // 将标注添加到地图中
//自定义图标
//var myIcon = new BMap.Icon("/imgs/mapIconBlue@1x.png", new BMap.Size(24, 32));
var iconURL = "/imgs/" + MapTitleId + ".png";
var myIcon = new BMap.Icon(iconURL, new BMap.Size(24, 32));
//var myIcon = BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300, 157));
var marker = new BMap.Marker(pointArray[i], { icon: myIcon }); // 创建标注
map.addOverlay(marker); //增加点
marker.addEventListener("click", attribute); //添加点击事件
}
showList(ServiceArray);
//map.setViewport(pointArray); //让所有点在视野范围内
},
error: function (data) {
alert("检查网络和地址是否正确!");
}
});
}
function showList(ServiceArray)
{
var listStr = "";
$('.itemBox li').remove();
//alert("showList"+ServiceArray.length)
for(var i = 0;i < ServiceArray.length;i++ )
{
name = ServiceArray[i].name;
addrSub = ServiceArray[i].address;
distance = ServiceArray[i].detail_info.distance+"米";
listStr = listStr + '<li ><div class="contentBox"><div class="itemContent"> <span class="icon-park"></span><span class="itemText itemTitle">' + name + '</span><span class="icon-distance"></span><span class="itemText itemdistance">' + distance + '</span></div><div class="itemInfo">' + addrSub + '</div></div></li>';
}
$(".itemBox").append(listStr);
}
function showService(ServiceArray) {
console.log(ServiceArray);
}
$("#traffic_panel").click();
document.getElementById("resold").style.color = "#F44336";
})
</script>