一个简单的百度地图工具 只要地址 不需要经纬度坐标
程序员文章站
2022-07-03 18:06:17
...
一个html页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>根据地址查询经纬度</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var add = decodeURI(getQueryVariable('add'));//需查询的地址
if (add != "") {
searchByStationName(add);
}
else {
searchByStationName("北京市");//给个默认值
}
});
</script>
<script type="text/javascript">
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) { return pair[1]; }
}
return (false);
}
</script>
</head>
<body>
<div id="container" style="width: 480px;height: 300px; overflow:hidden;"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("container");
var localSearch = new BMap.LocalSearch(map);
function searchByStationName(add) {
map.clearOverlays();//清空原来的标注
map.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用
map.centerAndZoom("北京市", 18);//18代表地图视野大小，值为：0~19，推荐：17或18
//map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
localSearch.enableAutoViewport(); //允许自动调节窗体大小
var keyword = add;//根据地址查询
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
map.centerAndZoom(poi.point, 18);
//添加小红点标记
var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));
map.addOverlay(marker);
//添加地址框
var infoWindow = new BMap.InfoWindow('<p style="color: #865BA3;font-size:14px;">地址：' + add + '</p>');
marker.addEventListener("click", function () {
this.openInfoWindow(infoWindow);
});
marker.openInfoWindow(infoWindow);
});
localSearch.search(keyword);
}
</script>利用iframe调用此页面，需要参数add=你要的地址：
<iframe src="http://djk8888.byethost32.com/BaiduMap.html?add=北京*" width="480" height="300"
frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>效果图：
在线体验地址：http://djk8888.byethost32.com/BaiduMap.html?add=北京*
(可以试着改掉add参数值，看看别的地址)