百度地图简要功能实现

来源：互联网发布：淘宝直播卖东西可信吗编辑：程序博客网时间：2024/06/05 18:46
<!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>
阅读全文
0 0