动态地图

<style type="text/css">
body, html{width: 463px;height: 595px;overflow: hidden;margin:0;}

#allmap {height: 887px;overflow: hidden; width:889px;}

#map{height: 507px;overflow: hidden; width:359px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=65ad2d1f5ec805495b76820e60b14ab0"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js%22%3E%3C/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">
    var map = new BMap.Map('map');
    var poi = new BMap.Point(120.183711, 30.222607);
    map.centerAndZoom(poi, 26);
    map.enableScrollWheelZoom();

    var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                    '地址:杭州市上城区钱江路58号-太和广场1幢306室' +
                  '</div>';

    //创建检索信息窗口对象
    var searchInfoWindow = null;
 searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
   title  : "杭州卡柏装饰工程有限公司 ",      //标题
   width  : 290,             //宽度
   height : 35,              //高度
   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上打开检索信息串口
   
function openInfoWindow3() {
    searchInfoWindow3.open(new BMap.Point(120.183711, 30.222607));
}

</script>

posted @ 2013-09-03 10:21  李翠华  阅读(251)  评论(0编辑  收藏  举报