一、首先确定我们的地图中心点、以及我们要添加标注的地方,在这里我选择以贵州黄果树瀑布为例
var poi = new BMap.Point(105.681847,25.986287);//确定地图中心点
二、在这里我们写了四个样式,一个默认样式以及三个可选样式,展示了不同的内容以及功能。
在每一个样式下我们都需要添加内容,每一个样式都是以一个新的窗口进行显示
- 默认样式
//创建检索信息窗口对象 var searchInfoWindow = null; searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, { title : "黄果树瀑布", //标题 width : 290, //宽度 height : 105, //高度 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_SEARCH, //周边检索 BMAPLIB_TAB_TO_HERE, //到这里去 BMAPLIB_TAB_FROM_HERE //从这里出发 ] }); var marker = new BMap.Marker(poi); //创建marker对象 marker.enableDragging(); //marker可拖拽 marker.addEventListener("click", function(e){ searchInfoWindow.open(marker); }) map.addOverlay(marker); //在地图中添加marker
- 样式一
var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "黄果树大瀑布以水势浩大著称,属喀斯特地貌中的侵蚀裂典型瀑布,雄伟壮观", { title: "黄果树瀑布", //标题 panel : "panel", //检索结果面板 enableAutoPan : true, //自动平移 searchTypes :[ BMAPLIB_TAB_FROM_HERE, //从这里出发 BMAPLIB_TAB_SEARCH //周边检索 ] }); function openInfoWindow1() { searchInfoWindow1.open(new BMap.Point(105.681847,25.986287)); }
3. 样式二、样式三与一除显示的功能外写法基本一致,不在赘述。
三、附上源码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {height: 500px;width:100%;overflow: hidden;}
#result {width:100%;font-size:12px;}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
dt{
font-size:14px;
font-family:"微软雅黑";
font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eZIflp2p4gzYF6E9O5H9EKyq471ic4cB"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<title>带检索功能的信息窗口</title>
</head>
<body>
<div id="allmap">
</div>
<div id="result">
<input type="button" value="默认样式" onclick="searchInfoWindow.open(marker);"/>
<input type="button" value="样式1" onclick="openInfoWindow1()"/>
<input type="button" value="样式2" onclick="openInfoWindow2()"/>
<input type="button" value="样式3" onclick="openInfoWindow3()"/>
</div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map('allmap');
var poi = new BMap.Point(105.681847,25.986287);
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'<img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=467e6c784ced2e73e8e48e7ee668caee/a8ec8a13632762d087072743a6ec08fa513dc615.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
'地址:安顺市镇宁布依族苗族自治县黄果树镇<br/>电话:8008208820<br/>简介:黄果树大瀑布以水势浩大著称,属喀斯特地貌中的侵蚀裂典型瀑布,雄伟壮观。' +
'</div>';
//创建检索信息窗口对象
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title : "黄果树瀑布", //标题
width : 290, //宽度
height : 105, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
var marker = new BMap.Marker(poi); //创建marker对象
marker.enableDragging(); //marker可拖拽
marker.addEventListener("click", function(e){
searchInfoWindow.open(marker);
})
map.addOverlay(marker); //在地图中添加marker
//样式1
var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "黄果树大瀑布以水势浩大著称,属喀斯特地貌中的侵蚀裂典型瀑布,雄伟壮观", {
title: "黄果树瀑布", //标题
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_FROM_HERE, //从这里出发
BMAPLIB_TAB_SEARCH //周边检索
]
});
function openInfoWindow1() {
searchInfoWindow1.open(new BMap.Point(105.681847,25.986287));
}
//样式2
var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "黄果树大瀑布以水势浩大著称,属喀斯特地貌中的侵蚀裂典型瀑布,雄伟壮观", {
title: "黄果树瀑布", //标题
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_SEARCH //周边检索
]
});
function openInfoWindow2() {
searchInfoWindow2.open(new BMap.Point(105.681847,25.986287));
}
//样式3
var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "黄果树大瀑布以水势浩大著称,属喀斯特地貌中的侵蚀裂典型瀑布,雄伟壮观", {
title: "黄果树瀑布", //标题
width: 290, //宽度
height: 40, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
]
});
function openInfoWindow3() {
searchInfoWindow3.open(new BMap.Point(105.681847,25.986287));
}
</script>
</body>
</html>