由于众诚鹏企客户网站需要,做了这么一个地图搜索小功能,效果图如下:
演示网址:http://www.zcpq.cn/m/map.html
完整代码如下,使用的是百度地图JS版API1.2版本:
<title>批量获取模糊搜索地址名称及坐标</title>
<meta name="Keywords" content="批量,获取坐标,模糊搜索">
<meta name="Description" content="本网页提供了批量搜索地名并返回地址及坐标的功能!">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
<P>搜索城市<input id="txtCity" type="text" value="北京市" /></n>
<p>地名关键词<input id="txtSearch" type="text" value="肯德基" />
<input type="button" value="生成坐标序列" onclick="search()" /> </n>
<p>显示结果<textarea id="txtResult" rows="10" cols="30" value="" /></textarea>
<div id="divMap" style="width:400px;height:400px;border:solid 1px gray"></div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);//定义$,以便调用
}
var map = new BMap.Map("divMap");//创建地图
var city=new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});
function search(){
$("txtResult").value=""//每次生成前清空文本域
map.clearOverlays(); //清除地图上所有标记
var c=$("txtCity").value;
city.search(c);//查找城市
var s=$("txtSearch").value;
var ls = new BMap.LocalSearch(c);
ls.search(s);
var i=1;
ls.setSearchCompleteCallback(function(rs){
if (ls.getStatus() == BMAP_STATUS_SUCCESS){
for(j=0;j<rs.getCurrentNumPois();j++)
{
var poi=rs.getPoi(j);
map.addOverlay(new BMap.Marker(poi.point)); //如果查询到,则添加红色marker
$("txtResult").value+= poi.title+":" +poi.point.lng+","+poi.point.lat+'\n';
}
if(rs.getPageIndex!=rs.getNumPages())
{
ls.gotoPage(i);
i=i+1;
}
}});}
</script>
</body>
</html>
总共8行 1页 每页20行 1