百度地图api实例

Posted 2020-09-25 bubuchu

<div id="allmap"></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的KEY"></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" />

<script type="text/javascript">
var map = new BMap.Map("allmap");
    var point = new BMap.Point(113.663941,34.805986);//坐标
    var marker = new BMap.Marker(point);  // 创建标注
    marker.enableDragging(); //marker可拖拽
     marker.addEventListener("click", function(e){
        searchInfoWindow.open(marker);
    })
    var content = ‘<div style="margin:0;line-height:20px;padding:2px;">‘ +
　　　　　　　　　　　　‘<img src="../img/baidu.jpg"  style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>‘ +
                    ‘地址：<br/>XXX<br/>电话：<br/>XXX‘ +
                  ‘</div>‘;
    //创建检索信息窗口对象
    var searchInfoWindow = null;
    searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title  : "XX公司",  //标题
            width  : 290,  //宽度
            height : 105,  //高度
            panel  : "panel",  //检索结果面板
            enableAutoPan : true,  //自动平移
            searchTypes   :[
                BMAPLIB_TAB_SEARCH,  //周边检索
                BMAPLIB_TAB_TO_HERE,  //到这里去
                BMAPLIB_TAB_FROM_HERE  //从这里出发
            ]
        });
    
    var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {
        title: "信息框1",  //标题
        panel : "panel",  //检索结果面板
        enableAutoPan : true,  //自动平移
        searchTypes :[
            BMAPLIB_TAB_FROM_HERE,  //从这里出发
            BMAPLIB_TAB_SEARCH  //周边检索
        ]
    });
    map.addOverlay(marker);  // 将标注添加到地图中
    map.centerAndZoom(point, 15);

    map.addControl(new BMap.MapTypeControl());  //添加地图类型控件
    map.setCurrentCity("北京市");  // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放
    function openInfoWindow1() {
        searchInfoWindow1.open(new BMap.Point(116.319852,40.057031));
    }
</script>