百度地图添加控件(addControl)

最新推荐文章于 2022-10-31 20:14:17 发布

tianmeng1999

最新推荐文章于 2022-10-31 20:14:17 发布

阅读量4.8k

点赞数

分类专栏：百度地图

本文链接：https://blog.csdn.net/weixin_42448623/article/details/100659221

版权

百度地图专栏收录该内容

14 篇文章 1 订阅

订阅专栏

百度地图秘钥申请(AK)

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v3.0版本控件</title>
    <style>
        html{height:100%}    
        body{height:100%;margin:0px;padding:0px}    
        #container{height:100%} 
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的秘钥"></script>
</head>
<body>
    <div id="container"></div> 
    <script>
        // 创建地图实例 
        var map = new BMap.Map("container");
        // 创建点坐标 
        var point = new BMap.Point(112.5527201488,26.9273408603);   //衡阳县第六中学    
        map.centerAndZoom(point, 18);// 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.setCurrentCity("衡阳"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用  

        // 添加控件
        var Scaleopts = { // 配置
            anchor:BMAP_ANCHOR_TOP_RIGHT, //控件的停靠位置
            //BMAP_ANCHOR_TOP_LEFT     控件将定位到地图的左上角
            //BMAP_ANCHOR_TOP_RIGHT    控件将定位到地图的右上角
            //BMAP_ANCHOR_BOTTOM_LEFT  控件将定位到地图的左下角
            //BMAP_ANCHOR_BOTTOM_RIGHT 控件将定位到地图的右下角
            offset: new BMap.Size(10,10), //控件的水平偏移值
        }
        var Navopts = {
            anchor:'',
            offset: new BMap.Size(10,10), //控件的水平偏移值
            type:'', //平移缩放控件的类型
            //BMAP_NAVIGATION_CONTROL_LARGE  标准的平移缩放控件（包括平移、缩放按钮和滑块）
            //BMAP_NAVIGATION_CONTROL_SMALL  仅包含平移和缩放按钮
            //BMAP_NAVIGATION_CONTROL_PAN    仅包含平移按钮
            //BMAP_NAVIGATION_CONTROL_ZOOM   仅包含缩放按钮
            showZoomInfo:'', //是否显示级别提示信息
            enableGeolocation:'' //控件是否集成定位功能，默认为false
        }
        map.addControl(new BMap.NavigationControl(Navopts));// 平移缩放控件
        map.addControl(new BMap.OverviewMapControl());// 缩略地图
        map.addControl(new BMap.ScaleControl(Scaleopts));// 比例尺
        map.addControl(new BMap.MapTypeControl());// 地图类型
        map.addControl(new BMap.CopyrightControl());// 版权
        map.addControl(new BMap.GeolocationControl());// 定位 针对移动端开发，默认位于地图左下方


        //移除控件 removeControl 

        var mark = new BMap.Marker(point);
        map.addOverlay(mark);
        var label = new BMap.Label("衡阳县第六中学",{position:point});
        map.addOverlay(label);
    </script>
</body>
</html>

效果

在这里插入图片描述

tianmeng1999

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
百度地图添加控件(addControl)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <met...
复制链接

扫一扫