百度地图坐标定位和周边环境查找例子
百度API接口 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></script>
地图面板:
</div>
<div class="periphery">
<div class="peripheryBd">
<h4>
周边查找:</h4>
<ul class="checkTag" id="hulMapCheckTag">
<li>
<input name="gongjiao" id="ck_bus" type="checkbox" value="公交" /><label for="ck_bus">公交</label></li>
<li>
<input name="ditie" id="ck_subway" type="checkbox" value="地铁" /><label for="ck_subway">地铁</label></li>
<li>
<input name="house" id="ck_school" type="checkbox" value="学校" /><label for="ck_school">学校</label></li>
<li>
<input name="yiyuan" id="ck_hospital" type="checkbox" value="医院" /><label for="ck_hospital">医院</label></li>
<li>
<input name="yinhang" id="ck_bank" type="checkbox" value="银行" /><label for="ck_bank">银行</label></li>
<li>
<input name="shop" id="ck_shop" type="checkbox" value="商场" /><label for="ck_shop">商场</label></li>
</ul>
<div class="peripheryBg">
</div>
<a class="closePer"><span>关闭</span></a>
</div>
</div>
JS代码:
$("div.periphery").show().appendTo("#mapDiv");
var local = "";
$(function ()
{
$("#hulMapCheckTag input[type=checkbox]").change(function () {
// var t = $(this).attr("name");
// $(map.getOverlays()).each(function (i, n) {
// if (n.iconDom.innerHTML.indexOf(t) > 0) {
// map.removeOverlay(n);
// }
// });
if ($(this).attr("checked") == true) {
local.searchInBounds($(this).val(), map.getBounds());
}
});
ShowMap();
})
function ShowMap() {
var lat = $("#htbLat").attr("value");
var lng = $("#htbLng").attr("value");
map.centerAndZoom(new BMap.Point(lng, lat), 16);
//只需要放大和缩小
map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_ZOOM }));
//map.enableScrollWheelZoom();
local = new BMap.LocalSearch(map, { onSearchComplete: searchComplete }); //构造一个查询
var point = new BMap.Point(lng, lat);
var mk = new BMap.Marker(point);
map.addOverlay(mk);
}
//查询完毕添加自定义标注
function addMarker(results, point, index) {
var cantingIcon = new BMap.Icon("/Images/canting.png", new BMap.Size(17, 16));
var ditieIcon = new BMap.Icon("/Images/ditie.png", new BMap.Size(17, 16));
var shopIcon = new BMap.Icon("/Images/shop.png", new BMap.Size(17, 16));
var yinhangIcon = new BMap.Icon("/Images/yinhang.png", new BMap.Size(17, 16));
var yiyuanIcon = new BMap.Icon("/Images/yiyuan.png", new BMap.Size(17, 16));
var houseIcon = new BMap.Icon("/Images/house.png", new BMap.Size(17, 16));
var gongjiaoIcon = new BMap.Icon("/Images/gongjiao.png", new BMap.Size(17, 16));
var myIcons = "";
if (results.keyword == "学校") {
myIcons = houseIcon;
} else if (results.keyword == "餐厅") {
myIcons = cantingIcon;
} else if (results.keyword == "商场") {
myIcons = shopIcon;
} else if (results.keyword == "银行") {
myIcons = yinhangIcon;
}
else if (results.keyword == "医院") {
myIcons = yiyuanIcon;
}
else if (results.keyword == "地铁") {
myIcons = ditieIcon;
}
else if (results.keyword == "公交") {
myIcons = gongjiaoIcon;
}
else {
myIcons = houseIcon;
}
var marker = new BMap.Marker(point.point, { icon: myIcons });
var infoWindow = new BMap.InfoWindow(point.title); // 创建信息窗口对象
marker.addEventListener("mouseover",
function () {
marker.openInfoWindow(infoWindow);
});
map.addOverlay(marker);
}
//查询完毕的回调函数
var searchComplete = function (results) {
if (local.getStatus() != BMAP_STATUS_SUCCESS) {
return;
}
//移除覆盖物
//map.clearOverlays();
//var lat = $("#htbLat").attr("value");
//var lng = $("#htbLng").attr("value");
//var point = new BMap.Point(lng, lat);
//var mk = new BMap.Marker(point);
//map.addOverlay(mk);
for (var cnt = 0; cnt < results.getCurrentNumPois(); cnt++) {
var point = results.getPoi(cnt);
addMarker(results, point, cnt);
}
}