欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

百度地图JS-API

程序员文章站 2022-06-10 10:49:17
...

百度地图:创建地图;创建自定义标注;点击标注跳转;全景地图;(项目:徐天下)

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=HWCnGTqVC*************&v=3.0"></script>
<script>
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(119.95,31.78);
    map.centerAndZoom(point, 16);


    //标注自定义图标的地点
    var myIcon_ci = new BMap.Icon("http://www.cperp.com/lpfbootstrap/images/xv/ci.png", new BMap.Size(60,60));//60 60为自定义图片的尺寸

    var point2 = new BMap.Point(119.951,31.779);
    var marker2 = new BMap.Marker(point2,{icon:myIcon_qi});  // 创建标注
    map.addOverlay(marker2);              // 将标注添加到地图中



//    添加文字说明有bug :文字背景框过小
//    var label = new BMap.Label("常州市某某有限公司",{offset:new BMap.Size(20,-10)});
//    label.setStyle({
//        color : "black",
//        fontSize : "12px",
//        height : "20px",
//        lineHeight : "20px",
//        backgroundColor:"white"
//
//    });
//    marker2.setLabel(label);
//   监听事件:点击地图上的覆盖点跳转
    marker2.addEventListener("click", function(){

        window.location.href="http://xxxxxxxxxxx"
    });

    var top_left_navigation = new BMap.NavigationControl();  //左上角,添加默认缩放平移控件
    map.addControl(top_left_navigation);
    map.addTileLayer(new BMap.PanoramaCoverageLayer());
    var stCtrl = new BMap.PanoramaControl(); //构造全景控件
    stCtrl.setOffset(new BMap.Size(20, 20));
    map.addControl(stCtrl);//添加全景控件


</script>