MENU▼

百度地图自定义信息框

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("bdmap");
    var point = new BMap.Point({$article['dt']});
    map.centerAndZoom(point, 18);

    var top_left_navigation = new BMap.NavigationControl();
    map.addControl(top_left_navigation);


    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);               // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画


    var opts = {

      width : 300,     // 信息窗口宽度
      height: 120,     // 信息窗口高度
      title : "<p style='font-size:14px;font-weight:bold;color:green;'>{$article['title']}</p>" , // 信息窗口标题
      offset: new BMap.Size(0, -40)//信息框偏移量
    }
    var infoWindow = new BMap.InfoWindow("<div style='font-size:12px;line-height: 20px;'>{if $article['dz']}<p>地址:{$article['dz']}</p>{/if}{if $article['dh']}<p>电话:{$article['dh']}</p>{/if}{if $article['cz']}<p>传真:{$article['cz']}</p>{/if}{if $article['yb']}<p>邮编:{$article['yb']}</p>{/if}</div>", opts);  // 创建信息窗口对象 

    map.openInfoWindow(infoWindow,point); //开启信息窗口
    marker.addEventListener("click", function(){          
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    });
</script>

请为这篇文章评分:
( 这篇文章尚未评分 )