<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html {
width: %;
height: %;
overflow: hidden;
margin: ;
} #allmap {
height: %;
overflow: hidden;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yqYfrk8ClmehOV743RST9c8Z"></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>SearchInfoWindow</title>
</head>
<body>
<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
<script type="text/javascript"> // 百度地图API功能
var map = new BMap.Map('map');
var poi = new BMap.Point(116.307852, 40.057031);
map.centerAndZoom(poi, );
map.enableScrollWheelZoom(); var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'<img src="/image/logo.png" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
'地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
'</div>'; //创建检索信息窗口对象
var searchInfoWindow = null;
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title: "百度大厦", //标题
width: , //宽度
height: , //高度
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
searchInfoWindow.open(marker); //在marker上打开检索信息串口
$("close").onclick = function () {
searchInfoWindow.close();
}
$("open").onclick = function () {
var enableSendToPhone = false;
if ($("enableSendToPhone").checked) {
enableSendToPhone = true;
}
searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
title: "百度大厦", //标题
width: , //宽度
height: , //高度
panel: "panel", //检索结果面板
enableAutoPan: true, //自动平移
enableSendToPhone: enableSendToPhone, //是否启用发送到手机
searchTypes: [
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
if ($("enableAutoPan").checked) {
searchInfoWindow.enableAutoPan();
} else {
searchInfoWindow.disableAutoPan();
};
searchInfoWindow.open(marker);
}
$("show").onclick = function () {
searchInfoWindow.show();
}
$("hide").onclick = function () {
searchInfoWindow.hide();
}
$("getPosition").onclick = function () {
var position = searchInfoWindow.getPosition();
alert("经度：" + position.lng + "；纬度：" + position.lat);
}
$("setValue").onclick = function () {
searchInfoWindow.setPosition(new BMap.Point($("lng").value, $("lat").value));
searchInfoWindow.setTitle($("title").value);
searchInfoWindow.setContent($("content").value);
}
$("getContent").onclick = function () {
alert(searchInfoWindow.getContent());
}
$("getTitle").onclick = function () {
alert(searchInfoWindow.getTitle());
}
function $(id) {
return document.getElementById(id);
} //样式1
var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {
title: "信息框1", //标题
panel: "panel", //检索结果面板
enableAutoPan: true, //自动平移
searchTypes: [
BMAPLIB_TAB_FROM_HERE, //从这里出发
BMAPLIB_TAB_SEARCH //周边检索
]
});
function openInfoWindow1() {
searchInfoWindow1.open(new BMap.Point(116.319852, 40.057031));
} //样式2
var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息框2内容", {
title: "信息框2", //标题
panel: "panel", //检索结果面板
enableAutoPan: true, //自动平移
searchTypes: [
BMAPLIB_TAB_SEARCH //周边检索
]
});
function openInfoWindow2() {
searchInfoWindow2.open(new BMap.Point(116.324852, 40.057031));
} //样式3
var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", {
title: "信息框3", //标题
width: , //宽度
height: , //高度
panel: "panel", //检索结果面板
enableAutoPan: true, //自动平移
searchTypes: [
]
});
function openInfoWindow3() {
searchInfoWindow3.open(new BMap.Point(116.328852, 40.057031));
} var isPanelShow = false;
//显示结果面板动作
$("showPanelBtn").onclick = function () {
if (isPanelShow == false) {
isPanelShow = true;
$("showPanelBtn").style.right = "300px";
$("panelWrap").style.width = "300px";
$("map").style.marginRight = "300px";
$("showPanelBtn").innerHTML = "隐藏检索结果面板<br/>>";
} else {
isPanelShow = false;
$("showPanelBtn").style.right = "0px";
$("panelWrap").style.width = "0px";
$("map").style.marginRight = "0px";
$("showPanelBtn").innerHTML = "显示检索结果面板<br/><";
}
}
</script>
</body>
</html>
详细实例请参考百度api