百度地图点击图层显示信息窗口
百度地图开发常用网站1、百度地图开放平台http://lbsyun.baidu.com/2、百度地图Javascript APIJavaScript API v3.0http://lbsyun.baidu.com/index.php?title=jspopular3.0JavaScript API v2.0http://lbsyun.baidu.com/ind...
·
百度地图开发常用网站
1、百度地图开放平台
http://lbsyun.baidu.com/
2、百度地图 Javascript API
-
JavaScript API v3.0 http://lbsyun.baidu.com/index.php?title=jspopular3.0
-
JavaScript API v2.0 http://lbsyun.baidu.com/index.php?title=jspopular
-
JavaScript API Lite http://lbsyun.baidu.com/index.php?title=jspopularLiteV1
3、JavaScript API v2.0类参考
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html
4、百度地图示例DEMO（JavaScript API v2.0）
http://lbsyun.baidu.com/jsdemo.htm#a1_2
5、百度地图 ak 申请：（JavaScript API v2.0）
http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey
6、开源库（JavaScript API v2.0）：鼠标绘制工具条、热力图、聚合marker、测距工具、自定义覆盖物、自定义信息窗口、路书等功能
http://lbsyun.baidu.com/index.php?title=jspopular/openlibrary
7、百度地图坐标拾取系统
http://api.map.baidu.com/lbsapi/getpoint/index.html
说明
项目中使用 JavaScript API v2.0 版本，当然也可以使用最新版 V3.0。
JavaScript API Lite是移动端浏览器上构建地图应用
百度地图点击图层显示信息窗口
1、百度地图 ak 申请：（JavaScript API v2.0）
http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey
2、实现效果图如下：
首先说明一下，这个功能主要是完成在地图上点击图层（覆盖物）显示详细内容。
比如，在地图上显示企业信息（企业名称、地址、负责人、电话等等）。
所以利用百度地图api可以在地图上面弹出信息窗口，当然也可以自己实现弹出信息窗口。
动态图：
3、网页源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度地图点击图层显示信息窗口</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你在百度地图开放平台申请的ak"></script>
<!-- 你在百度地图开放平台申请的ak -->
</head>
<body>
<div id="allmap" style="position: absolute; width: 100%; top: 0px; bottom: 0px"></div>
<script type="text/javascript">
//添加鼠标单击事件、鼠标触发事件
function addMarkerClickHandler( content, marker , showType) {
//图层点击事件，像是详细信息
marker.addEventListener("click", function (e) {
openInfo(content, e);
});
//鼠标经过图层时的操作
marker.addEventListener("mouseover", function (e) {
marker.setTop(true);//设置显示在最上面，防止多图层显示在相同位置时 无法知道时哪个图层
marker.setIcon(icon_highlight);//设置图层高亮显示
if (marker.getLabel()) {
marker.getLabel().show();
}
});
//鼠标离开图层后的操作
marker.addEventListener("mouseout", function (e) {
marker.setTop(false);
//显示不同的颜色显示标签
//showType
//复原图层的原始图标
if (showType == "1") {
marker.setIcon(icon_red);
} else if (showType == "2") {
marker.setIcon(icon_green);
}
//隐藏图层标签内容
if (marker.getLabel()){
marker.getLabel().hide();
}
});
}
//显示信息窗口参数及显示函数
/** 信息窗口参数 */
var opts = {
width : 220, // 信息窗口宽度
//height : 200, // 信息窗口高度
//title : "详细信息" , // 信息窗口标题
enableMessage : false// 设置允许信息窗发送短息
};
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); // 开启信息窗口
}
//红色
var icon_red = new BMap.Icon("img/icon_red.png", new BMap.Size(24, 35), { anchor: new BMap.Size(0, 0) });
//蓝色（高亮）
var icon_highlight = new BMap.Icon("img/icon_highlight.png", new BMap.Size(24, 35), { anchor: new BMap.Size(0, 0) });
//绿色
var icon_green = new BMap.Icon("img/icon_green.png", new BMap.Size(24, 35), { anchor: new BMap.Size(0, 0) });
var map = new BMap.Map("allmap", { minZoom: 9, maxZoom: 19 });
var point = new BMap.Point(116.128554, 24.294562);
var top_left_navigation = new BMap.NavigationControl();
map.addControl(top_left_navigation);// 添加平移缩放控件
map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom();//启用滚轮放大缩小
map.centerAndZoom(point, 9);
var bmp_type = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });
map.addControl(bmp_type);
var styleOptions = {
strokeColor: "red", //边线颜色。
fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
map.disableDoubleClickZoom();
//使用不同的颜色显示标签
//红色图标显示图层1
var marker1 = new BMap.Marker(point, { icon: icon_red, offset: new BMap.Size(0, 0) });
var label1 = new BMap.Label("这是红色图标显示的标签内容", { offset: new BMap.Size(30, 0) });
label1.setStyle({color: "red",fontSize: "12px",height: "20px",lineHeight: "20px",fontFamily: "微软雅黑"});
label1.hide();
marker1.setLabel(label1);
//设置图层可以被拖动
marker1.enableDragging();
//添加信息窗口内容, 支持html元素
var marker1Info = "";
marker1Info += "企业名称：XXX公司1" +"<br/>";
marker1Info += "企业地址：广东省梅州市XXX县XX镇XXXXXX" +"<br/>";
marker1Info += "负责人：XXX" +"<br/>";
marker1Info += "电话：186XXXXXXXX" +"<br/>";
marker1Info += "其他信息1：XXXXXXXXXXXXXXXXX"+"<br/>";
marker1Info += "其他信息2：XXXXXXXXXXXXXXXXX"+"<br/>";
marker1Info += ".......";
//添加鼠标点击事件、鼠标触发事件
addMarkerClickHandler( marker1Info, marker1, "1");
//绿色图标显示图层2
var point2 = new BMap.Point(116.328554, 24.594562);//图层2的坐标
var marker2 = new BMap.Marker(point2, { icon: icon_green, offset: new BMap.Size(0, 0) });
var label2 = new BMap.Label("这是绿色图标显示的标签内容", { offset: new BMap.Size(30, 0) });
label2.setStyle({color: "red",fontSize: "12px",height: "20px",lineHeight: "20px",fontFamily: "微软雅黑"});
label2.hide();
marker2.setLabel(label2);
//设置图层可以被拖动
marker2.enableDragging();
//添加信息窗口内容, 支持html元素
var marker2Info = "";
marker2Info += "企业名称：XXX公司2" +"<br/>";
marker2Info += "企业地址：广东省梅州市XXX县XX镇XXXXXX" + "<br/>";
marker2Info += "负责人：XXX" +"<br/>";
marker2Info += "电话：139XXXXXXXX" +"<br/>";
marker2Info += "其他信息1：XXXXXXXXXXXXXXXXX"+"<br/>";
marker2Info += "其他信息2：XXXXXXXXXXXXXXXXX"+"<br/>";
marker2Info += ".......";
//添加鼠标点击事件、鼠标触发事件
addMarkerClickHandler( marker2Info , marker2, "2");
//往地图中添加图层
map.addOverlay(marker1);
map.addOverlay(marker2);
</script>
</body>
</html>
源码已经打包到百度云盘，下载地址：
链接：https://pan.baidu.com/s/1X-i8IftNaZYStHhLnaL64Q
提取码：2kj7
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
1
0- 0
已为社区贡献12条内容
所有评论(0)