百度地图可视区域随标记点位置自动切换

原创 2018年04月17日 13:56:01

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

<!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;
        lnglat.lat = Math.round((Math.random() * 360 - 180) * 1000) / 1000;
        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>
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lihefei_coder/article/details/79973878

百度地图api将可视区域定位到当前所在位置

1.前言 开头不说点什么,总是有点不习惯。还是说点什么吧,关于百度地图,我用的次数还是比较多的,没办法,需求呀。好吧,在用百度地图的时候,确实有过很多需求,不过好在百度地图很强大,每次需求在探索后都...
  • sxs161028
  • sxs161028
  • 2017-07-19 18:05:52
  • 787

百度地图API (1):往地图中添加标注点

1.实现功能:通过给定的坐标点,往地图中添加标注点,点击标注点,显示改点的详细信息。 2.效果图: 3.核心方法: 手动创建数据,实际项目则是接受GPS信息 //新建三个地图上点 var po...
  • c1481118216
  • c1481118216
  • 2016-09-11 11:50:59
  • 14252

Android---百度地图点击标注点,获取标注点的信息

public void changeUI(String result_info) { // 定义Marker坐标点 point[i] = new La...
  • JamieCheung
  • JamieCheung
  • 2017-10-25 11:03:24
  • 666

百度地图创建标记点

项目需求:项目需要从数据库加载数据到百度地图上,显示未标记点。 js代码如下: //创建地图 function showMap(){ map = new BMap.Map("in...
  • yeyujiao8888
  • yeyujiao8888
  • 2016-05-06 13:58:37
  • 1983

百度地图添加标记以及标记的点击

废话少说,直接上代码: MapActivity.javapackage com.wissea.trs.activity;import java.util.ArrayList; import java...
  • ithouse
  • ithouse
  • 2015-05-22 16:26:20
  • 3466

使用百度地图API实现地图生成、标记以及标注

使用百度地图JavaScript API实现地图的生成、标记以及标注
  • qq_35042227
  • qq_35042227
  • 2017-11-29 19:07:56
  • 744

android 百度地图实现定位以及批量添加标注

  • 2016年01月05日 23:55
  • 36.04MB
  • 下载

百度地图自定义坐标标识覆盖物,随地图缩放偏移解决办法

百度地图在添加自定义标注的时候可能会遇见坐标标识,随着地图缩放位置产生偏移,我折腾了一个上午,记下这篇。...
  • u010690828
  • u010690828
  • 2017-03-17 14:32:21
  • 5142

js 百度地图标记定位(一)

【html代码】 详细地址: 经纬度: ...
  • wujiangwei567
  • wujiangwei567
  • 2015-05-06 20:43:15
  • 3176

【百度地图API】如何在地图上添加标注?——另有:坐标拾取工具+打车费用接口介绍

一、如何进行标注1、首先,我们需要找准标注的位置。比如,我想标注“中央民族大学”附近的网球场。那么,我转到坐标拾取工具页面,请点击http://openapi.baidu.com/map/pick/i...
  • host_2007
  • host_2007
  • 2011-03-22 20:33:00
  • 11387
收藏助手
不良信息举报
您举报文章:百度地图可视区域随标记点位置自动切换
举报原因:
原因补充:

(最多只允许输入30个字)