高德地图应用

在这里插入图片描述
创建地图

去高德地图官网申请key值
引入自己的key值<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
申请一个容器div
.创建地图 new AMap.Map(‘容器的名字’);

获取级别和中心点
zoom:11
center:[120,33]
zoom的数字越大，显示的越精细，越小显示的范围越大
getZoom() 获取地图的级别
getCenter() 获取地图中心位置

on(‘moveend’) //地图移动结束时
on(‘zoomend’)//地图级别发生变化时
设置级别和中心点
setZoom() 设置地图的级别
setCenter() 设置地图的中心点
setZoomAndCenter() 同时设置地图的级别和中心点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个地图</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0"></script>
    <style type="text/css">
        * {margin: 0;padding: 0;}
        #container { width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
        #setZoomNode,#setCenterNode{width: 360px;height: 100px; position: absolute;z-index: 99;right: 20px;top: 20px;border: 1px solid black;box-shadow: 0 0 5px black;background: white;}
    </style>
</head>

<body>
    <div id="container"></div>
    <div id="setCenterNode">
        x:<input type="" name="" id='xNode'>
        y:<input type="" name="" id='yNode'>
        zoom:<input type="text" name="" id='zoomVal'>
        <button id='btn'>确定</button>
    </div>
    <script type="text/javascript">
        var map = new AMap.Map('container', {
            zoom: 11,//初始的地图级别
            center: [121, 30]//初始化地图的中心点
        });
        //通过事件来给他设定级别
        btn.onclick = function () {
            map.setZoomAndCenter(zoomVal.value,[xNode.value,yNode.value]);
        }
        //当中心点发生变化时
        map.on('moveend', function () {
            console.log(map.getZoom());
            console.log(map.getCenter().toString());
        });
        //当双击级别发生变化时
        map.on('zoomend', function () {
            console.log(map.getZoom());
            console.log(map.getCenter().toString());
        })
    </script>
</body>
</html>

获取地图的行政区
map.getCity(function(info){
info 当前中心点的行政区
})
设置地图的行政区
map.setCity(‘字符串’)
想让地图到达该地区的中心点
获取地图的范围
getBounds().northeast //右上角的坐标
getBounds().southwest //左下角左边
设置地图的范围
var myBounds = new AMap.Bounds(左下角坐标的数组，右上角坐标的数组)
map.setBounds(myBounds) //但是不是特别精准，会以它觉得最好的方式去显示
设置显示范围
getBounds() // northeast.P / R southwest.P / R
setLimitBounds() ;
清除设定的显示范围
clearLimitBounds();
地图的平移
panBy(x,y) x代表向左平移多少像素 / y代表向上平移多少像素
panTo([x坐标，y坐标]) 地图会直接平移到这个位置
获取鼠标的经纬度
e.lnglat.lng / lat
设置地图鼠标的默认样式
setDefaultCursor(‘样式’)
cursor : 里面所有的样式都可以
综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>高德地图小工具栏</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #container {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        #setCenterNode {
            width: 400px;
            height: 300px;
            position: absolute;
            z-index: 9;
            left: 20px;
            top: 20px;
            border: 1px solid black;
            box-shadow: 0 0 5px black;
            background: white;
            text-align: center;
            line-height: 50px;
        }
        .nowCity {
            position: absolute;
            right: 10px;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div id='setCenterNode'>
        <h2 class="tabs">工具栏</h2>
        <p>
            <span>搜索城市</span>
            <input type="text" id="cityNode" />
            <button id="cityBtn">确定</button>
        </p>
        <p>
            <span>设置显示级别</span>
            <input type="text" id="zoomNode" />
            <button id="zoomBtn">确定</button>
        </p>
        <button id="btnClear">解除范围限制</button>
        <br />
        <div class="nowCity">您当前所在/直辖市：<span id="nowCity"></span></div>
    </div>
    
    <script type="text/javascript">
        var map = new AMap.Map('container', {
            zoom: 11,
            center: [116.379391, 39.861536]
        });
        //设置地图的显示范围
        var myBounds = map.getBounds();
        map.setBounds(myBounds);
        //设置显示范围限制-->现在地图显示北京
        map.setLimitBounds(myBounds);
        //搜索城市
        cityBtn.onclick = function () {
            map.setCity(cityNode.value);
        }
        //设置级别
        zoomBtn.onclick = function () {
            map.setZoom(zoomNode.value);
        }
        //单机清除按钮，通过isLimit的状态判断是否清除限制
        var isLimit = false;
        btnClear.onclick = function () {
            if (isLimit == false) {
                btnClear.innerHTML = '已解除范围限制';
                map.clearLimitBounds(myBounds);
                isLimit = true;
            } else {
                map.setLimitBounds(myBounds);
                btnClear.innerHTML = '接触范围限制';
                isLimit = true;
            }
        }
        //当前行政中心
        map.getCity(function (info) {
            nowCity.innerHTML = info.province;
        });
        //绑定moveend事件
        map.on('moveend', function (info) {
            map.getCity(function (info) {
                nowCity.innerHTML = info.city;
            });
        })
    </script>
</body>
</html>```

saiyi绒小花

发布了40 篇原创文章 · 获赞 0 · 访问量 765

私信关注

猜你喜欢