百度地图简要功能实现

最新推荐文章于 2022-03-14 18:19:44 发布

zhanghao86_

最新推荐文章于 2022-03-14 18:19:44 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： html5 百度地图 JavaScript API JSAPI类监听事件

本文链接：https://blog.csdn.net/zhanghao86_/article/details/76651319

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*给地图设置样式*/
        *{
            margin: 0;
            padding:0;
        }
        /*全屏显示*/
        html,body,#map{
            width: 100%;
            height: 100%;
        }
    </style>
    <!--引入百度地图的api-->
    <script src="http://api.map.baidu.com/api?v=2.0&ak=PTF8K0hy3gaW1ofvS8rwmXqWCMZxWifL"></script>
</head>
<body>

<!--创建一个盛放百度地图的容器，设置一个id-->
<div id="map"></div>

<script>
//    建一个初始化函数
    function init() {

//        传入一个地图的种类，不能实例化，只能用字面量方式调用
        var opt={mapType:BMAP_NORMAL_MAP};
//        创建一个地图的对象，传容器的名字，以为地图显示的种类，包括路线的和透视的等四种
        var map=new BMap.Map("map",opt);
//        初始化地图方式1：直接传城市名
        // map.centerAndZoom("北京");
//        初始化地图方式2：传一个中心点坐标（经纬度）,传一个初始地图级别
        var center=new BMap.Point(117,40);
        map.centerAndZoom(center, 11);
//        调用Map类中的禁用拖拽地图功能
        map.disableDragging();
//        开启滚轮缩小/放大地图功能
        map.enableScrollWheelZoom();
//        禁用双击放大地图功能
        map.disableDoubleClickZoom();
//        给地图添加一个鼠标右键点击事件
        map.addEventListener("rightclick",function () {
//            开启拖拽地图功能
            map.enableDragging()
        });
//        创建一个特定样式的地图定位控件
        var location=new BMap.GeolocationControl({
//            自定义定位中心点的Icon样式
            locationIcon:new BMap.Icon("icon.png",new BMap.Size(50,50))
        });
//        设置该控件的位置
        location.setAnchor(BMAP_ANCHOR_TOP_RIGHT);
//        通过addControl()方法使用控件
        map.addControl(location);
//        给地图添加单击事件
        map.addEventListener("click",function () {
//            定位控件隐藏，继承Control类中的方法
            location.hide();
        });
//        给地图添加右击事件
        map.addEventListener("rightclick",function () {
//            定位控件显示，继承Control类中的方法
            location.show();
        });

//        利用定时器，3秒钟调用定位控件发起定位
        setTimeout(function () {
            location.location();
        },3000);
//        返回定位的位置信息
        console.log(location.getAddressComponent());
//        创建切换地图类型的控件
        var mapTypeControl=new BMap.MapTypeControl({
//            传入控件样式：包括下拉列表，水平展示和图片显示三种
            type:BMAP_MAPTYPE_CONTROL_DROPDOWN,
//            传入地图的四个类型，供选择
            mapTypes:[BMAP_SATELLITE_MAP,BMAP_NORMAL_MAP]
        });
//        通过addControl()方法使用控件
        map.addControl(mapTypeControl);
//        创建一个版权控件
        var CopyrightControl=new BMap.CopyrightControl({
//            传入一个显示的位置
            anchor:BMAP_ANCHOR_TOP_LEFT
        });
//        调用addCopyright()方法添加版权信息，传入id，和content显示该控件内容
        CopyrightControl.addCopyright({
            id:1,
            content:"地图"
        });
        map.addControl(CopyrightControl);
//        创建全景控件
        var PanoramaControl=new BMap.PanoramaControl({
//            传入控件显示位置
            anchor:BMAP_ANCHOR_BOTTOM_RIGHT
        });
        map.addControl(PanoramaControl);

//        var scaleControl=new UMap.ScaleControl();
//        map.addControl(scaleControl);

        // 设置图片样式
        var markerImg=new BMap.Icon("marker.png",new BMap.Size(40,40));
        markerImg.setImageSize(new BMap.Size(40,40));
        // 创建图像标注控件
        // 传入位置（经纬度）
        var marker=new BMap.Marker(center,{
            // 传入标注所用的图标对象
            icon:markerImg,
            // 传入标注位置的偏移量
            offset:new BMap.Size(85,25)
        });
        // 通过Map类中addOverlay()方法给地图添加覆盖物
        map.addOverlay(marker);

        // 练习：给地图添加双击事件，获取元素所在的经纬度，添加地图标注，并有跳动的动画效果
        map.addEventListener("dblclick",function (event) {

            var markerImg=new BMap.Icon("marker.png",new BMap.Size(40,40));
            markerImg.setImageSize(new BMap.Size(40,40));
            var marker=new BMap.Marker(event.point,{
                icon:markerImg
            });
            map.addOverlay(marker);
            // 跳动动画
            marker.setAnimation(BMAP_ANIMATION_BOUNCE)

        });



    }

    init();
</script>
</body>
</html>