<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Cache-Control" content="no-transform" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7mIEAV9StD8UEWv4Gi57G4fU"></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" />
<style>
#allmap{margin:55px auto;width:1050px;height:500px;}
#result{@extend .W100;font-size:12px;}
#allmap dt{font-size:14px;font-weight:bold;border-bottom:1px dotted #000;padding:5px 0 5px 5px;margin:5px 0;}
#allmap dd{padding:5px 0 0 5px;}
#allmap li{line-height:28px;}
</style>
</head>
<body>
<div class="w12">
<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(116.483698,39.936311);
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
'<img src="images/map.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
'北京市朝阳区水碓子北里万科东第1号楼底商<br/>【北京华悦府医疗美容医院】<br/>电话：13718893052 '+'</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可拖拽
searchInfoWindow.open(marker);
marker.addEventListener("click", function(e){
searchInfoWindow.open(marker);
});
map.addOverlay(marker); //在地图中添加marker
//样式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.483698,39.936311));
}
//样式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.483698,39.936311));
}
//样式3
var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", {
title: "信息框3", //标题
width: 290, //宽度
height: 40, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
]
});
function openInfoWindow3() {
searchInfoWindow3.open(new BMap.Point(116.483698,39.936311));
}
</script>
</div>
</body>
</html>