百度地图可视区域随标记点位置自动切换_百度地图点击地图标注图标会切换位置-CSDN博客

本文链接：https://blog.csdn.net/lihefei_coder/article/details/79973878

注：为保证demo正常运行，需要在下面代码这一行<script src=“http://api.map.baidu.com/api?v=2.0&ak=你的key”></script>填写有效的key

核心代码

var curPoint = new BMap.Point(113.2487, 26.4457); //当前的点
var bound = map.getBounds(); //地图可视区域
if (!bound.containsPoint(curPoint)) { //如果点不在可视区域内
    map.setCenter(curPoint); //设置当前的点为地图中心点
}

完整代码

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>百度地图可视区域内随标记点位置自动切换</title>
    <style>
    body,
    html,
    #map {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        font-family: "微软雅黑";
    }

    .map-tools {
        position: fixed;
        right: 15px;
        bottom: 15px;
        z-index: 9;
        width: 48px;
        height: 96px;
        text-align: center;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
    }

    .btn {
        width: 48px;
        height: 48px;
        line-height: 48px;
        font-size: 30px;
        cursor: pointer;
        user-select: none;
    }
    .btn:hover {
    	background: rgba(0, 0, 0, .05);
    }

    .btn-plus {
        border-bottom: 1px solid rgba(0, 0, 0, .1);
    }
    </style>
</head>

<body>
    <div class="map-tools">
        <div id="plusBtn" class="btn btn-plus">+</div>
        <div id="minusBtn" class="btn btn-minus">-</div>
    </div>
    <div id="map"></div>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script> <!-- 必须填写key！！！ -->
    <script>
    var map,centerPoint,marker;
    mapInit();
    zoomMap();
    addMarker();

    //地图初始化
    function mapInit(){
    	map = new BMap.Map("map"); //创建地图到ID元素容器
    	centerPoint = new BMap.Point(randomLnglat().lng, randomLnglat().lat);
    	map.centerAndZoom(centerPoint, 4); // 初始化地图,设置中心点坐标和地图级别
    }

    //添加标记
    function addMarker(){
    	marker = new BMap.Marker(centerPoint);
    	map.addOverlay(marker);
    }

    //每3秒钟改变一次Marker经纬度
    setInterval(function() {
        var curPoint = new BMap.Point(randomLnglat().lng, randomLnglat().lat); //随机生成坐标
        marker.setPosition(curPoint); //设置新坐标点

        var bound = map.getBounds(); //地图可视区域
        if (!bound.containsPoint(curPoint)) { //如果点不在可视区域内
            map.setCenter(curPoint); //设置视图中心点
        }
    }, 3000);


    //随机经纬度
    function randomLnglat() {
        var lnglat = {};
        lnglat.lng = Math.round((Math.random() * 360 - 180) * 1000) / 1000; //经度取值范围-180~180
        lnglat.lat = Math.round((Math.random() * 180 - 90) * 1000) / 1000; //纬度取值范围-90~90
        return lnglat;
    }

    //缩放地图
    function zoomMap() {
        plusBtn.onclick = function() {
            map.zoomTo(map.getZoom() + 1); //获取地图级别+1
        };
        minusBtn.onclick = function() {
            map.zoomTo(map.getZoom() - 1); //获取地图级别-1
        };
    }
    </script>
</body>

</html>