首页 > 代码库 > 百度地图覆盖物信息显示和隐藏
百度地图覆盖物信息显示和隐藏
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=91a78a08c050e6aee22495bea9dcb136"></script>
<title>娣诲姞鏅€氭爣娉ㄧ偣</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 鐧惧害鍦板浘API鍔熻兘
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
var marker1 = new BMap.Marker(new BMap.Point(116.384, 39.925)); // 鍒涘缓鏍囨敞
map.addOverlay(marker1); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓?
//鍒涘缓淇℃伅绐楀彛
var infoWindow1 = new BMap.InfoWindow("鏅€氭爣娉?);
marker1.addEventListener("mouseover", function(){this.openInfoWindow(infoWindow1);})
;
marker1.addEventListener("mouseout", function(){this.closeInfoWindow(infoWindow1);})
;
//鍒涘缓灏忕嫄鐙?
var pt = new BMap.Point(116.417, 39.909);
var myIcon = new BMap.Icon("fox.gif", new BMap.Size(300,157));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 鍒涘缓鏍囨敞
map.addOverlay(marker2); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓?
//璁╁皬鐙愮嫺璇磋瘽锛堝垱寤轰俊鎭獥鍙ｏ級
var infoWindow2 = new BMap.InfoWindow("<p style=‘font-size:14px;‘>鍝堝搱锛屼綘鐪嬭鎴戝暒锛佹垜鍙笉甯稿嚭鐜板摝锛?/p><p style=‘font-size:14px;‘>璧跺揩鏌ョ湅婧愪唬鐮侊紝鐪嬬湅鎴戞槸濡備綍娣诲姞涓婃潵鐨勶紒</p>");
marker2.addEventListener("click", function(){this.openInfoWindow(infoWindow2);});
</script>