百度地图，带搜索的，案例

最新推荐文章于 2022-11-14 09:58:24 发布

飞鸟flyboy

最新推荐文章于 2022-11-14 09:58:24 发布

阅读量501

点赞数 1

分类专栏： html 文章标签：百度地图

本文链接：https://blog.csdn.net/a5251199/article/details/49335493

版权

html 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!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=csbBNOd9UEdXZ1QKXnDbZAc1"></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="样式1" οnclick="openInfoWindow1()"/>
</div>
<script type="text/javascript">
// 百度地图API功能
    var map = new BMap.Map('allmap');
    var poi = new BMap.Point(116.307852,40.057031);
    map.centerAndZoom(poi, 16);
    map.enableScrollWheelZoom();












    var contents = '<div style="margin:0;line-height:20px;padding:2px;">' +
                    '<img src="baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
                    '地址:内蒙古乌兰察布市<br/>电话：(010)00000000<br/>简介：我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍我是介绍。' +
                  '</div>';
 // 自己写的3
var myIcon = new BMap.Icon("dian.png", new BMap.Size(32,32));
    var myIcon2 = new BMap.Icon("dianlv.png", new BMap.Size(32,32));
var data_info = [
[116.302952,40.057031,contents,myIcon,"种植大户1"],
[116.304952,40.057031,"地址：2222",myIcon,"种植大2"],
[116.307952,40.059031,"地址：33335号",myIcon2,"种植大3"]
];

for(var i=0;i<data_info.length;i++){
var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]),{icon:data_info[i][3]});  // 创建标注
marker.enableDragging(); 
var content = data_info[i][2];
map.addOverlay(marker);               // 将标注添加到地图中
addClickHandler(content,marker,data_info[i][4]);
} 
function addClickHandler(content,marker,utitle){
var searchInfoWindow9 = null;
searchInfoWindow9 = new BMapLib.SearchInfoWindow(map, content, {
title  : utitle,      //标题
width  : 290,             //宽度
height : 105,              //高度
panel  : "panel",         //检索结果面板
enableAutoPan : true,     //自动平移
searchTypes   :[/* 去掉就显示检索了
BMAPLIB_TAB_SEARCH,   //周边检索
BMAPLIB_TAB_TO_HERE,  //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
*/]
});
marker.addEventListener("click",function(e){
//openInfo(content,e)
searchInfoWindow9.open(marker);
}
);
} 
//自己写的3结束

/*//样式1
var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, content2, {
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));
}
*/


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

飞鸟flyboy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图，带搜索的，案例

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;l
复制链接

扫一扫

专栏目录