基于百度在线地图的demo

最新推荐文章于 2021-11-04 17:22:47 发布

qq_36179561

最新推荐文章于 2021-11-04 17:22:47 发布

阅读量265

点赞数

分类专栏： GIS地图

本文链接：https://blog.csdn.net/qq_36179561/article/details/100704836

版权

GIS地图专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        .map {
            width: 100%;
            height: 500px;
            float: left;
            overflow: hidden;
        }

        p {
            margin-left: 5px;
            font-size: 14px;
        }

    </style>
    <title>地图DEMO</title>
</head>
<body>
<div id="allmap" class="map"></div>
</body>
</html>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=8BaH1arvq7rizUO9dFHT03cu0ODORMr2"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<script type="text/javascript">
        var map = new BMap.Map('allmap');
        //通过坐标设置中心点
        //var point=new BMap.Point(116.404, 39.915);
        // map.centerAndZoom(point, 11);

        //通过城市名称设置中心点
        map.centerAndZoom("北京", 11);

        //开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true);
        
        //禁止拖拽
        //map.disableDragging();

        //将地图显示范围设定在指定区域，地图拖出该区域后会重新弹回。
        /*
            var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349));
            try {
                BMapLib.AreaRestriction.setBounds(map, b);
            } catch (e) {
                alert(e);
            }
        */

        //添加定位功能
        var navigationControl = new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE,
            enableGeolocation: true
        });

        map.addControl(navigationControl);
        var geolocationControl = new BMap.GeolocationControl();
        geolocationControl.addEventListener("locationSuccess", function (e) {
            var address = "";
            address += e.addressComponent.province;
            address += e.addressComponent.city;
            address += e.addressComponent.district;
            address += e.addressComponent.street;
            address += e.addressComponent.streetNumber;
            alert("当前定位地址为：" + address);
        });
        geolocationControl.addEventListener("locationError", function (e) {
            alert(e.message);
        });
        map.addControl(geolocationControl);

        //2秒后移动到广州
        /*
            setTimeout(function(){
                map.panTo(new BMap.Point(113.262232,23.154345));
                //放大到14级
                map.setZoom(12);
                //允许拖拽
                map.enableDragging();
            }, 3000);
        */



</script>

官网demo：http://lbsyun.baidu.com/jsdemo.htm#canvaslayer

qq_36179561

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于百度在线地图的demo

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="initial-scale=1.0, user-scalable=n...
复制链接

扫一扫

专栏目录