使用百度地图API实现地图搜索功能-CSDN博客

本文链接：https://blog.csdn.net/zxlstudio/article/details/41511917

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=88tIAwQlB5q8kdbzoueRgA75"></script>
</head>
 
<body>
	<p>
        地址：<input id="txtSearch" type="text" />
        <input type="button" value="搜索" οnclick="bmapsearch()" />
    </p>

<div id="container"></div>
<script type="text/javascript">
var map = new BMap.Map("container");          // 创建地图实例
var point = new BMap.Point(121.443978, 37.469198);  // 创建点坐标
map.centerAndZoom(point, 13);                 // 初始化地图，设置中心点坐标和地图级别

//缩放控件
var opts = {type: BMAP_NAVIGATION_CONTROL_LARGE}    
map.addControl(new BMap.NavigationControl(opts));   

//默认标注
var spoint=new BMap.Point(121.443978, 37.469198);
var marker = new BMap.Marker(spoint);        // 创建标注    

map.addOverlay(marker);                     // 将标注添加到地图中  
marker.addEventListener("click", function(){      
  //alert("您点击了标注");  
  map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口       
});  


//信息窗
var opts = {    
 width : 250,     // 信息窗口宽度    
 height: 100,     // 信息窗口高度    
 title : "Hello"  // 信息窗口标题   
}    
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗口对象    

//查询
function bmapsearch(){
	var local = new BMap.LocalSearch(map, {      
	      renderOptions:{map: map}      
	});  

	var search_input=document.getElementById('txtSearch').value;
	if(search_input.length==0){
		alert("input null");
	}else{
		local.search(search_input);   	
	}
	
}    



</script>
</body>
</html>

百度地图查询标记