高德地图的简单快速使用

最新推荐文章于 2024-06-27 16:37:42 发布

冷太阳a

最新推荐文章于 2024-06-27 16:37:42 发布

阅读量783

点赞数

分类专栏：地图API 文章标签：高德地图

本文链接：https://blog.csdn.net/a_9888/article/details/106859717

版权

地图API 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

step1. 注册账号并申请Key

首先，注册高德地图key开发者账号，成为高德开放平台开发者
登陆之后，在进入「应用管理」页面「创建新应用」
为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

step2.

高德地图开发者文档文档

step3.简单快速应用

里面有个script标签需要填写key

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" type="text/css" href="https://a.amap.com/jsapi_demos/static/demo-center/css/prety-json.css">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
        .showCityBox {
            position: absolute;
            left: 80px;
            top: 150px;
            width: 400px;
            height: 350px;
            border: 2px solid rgb(60, 1, 255);
            margin: 50px auto;
            z-index: 999;

        }

        label {
            display: inline-block;
            margin-top: 10px;
        }

        #province {
            width: 280px;
            padding-left: 15px;
        }

        button {
            border: none;
            width: 60px;
            height: 20px;
            vertical-align: middle;

        }

        input {
            padding-left: 7px;
        }

        #xNode,
        #yNode {
            width: 110px;
        }

        #searchBox {
            width: 170px;
            height: 300px;
            margin: 0 auto;
        }

        #searchBox li {
            margin: 5px 0 0 25px;
            cursor: pointer;

        }
    </style>
    <title>获取输入提示信息</title>
</head>

<body>
    <div id="container">
        <div class="showCityBox">
            <label for="zoomVal">
                显示地图的级别：
                <input type="text" id="zoomVal" value="" placeholder="请输入0-20的地图显示级别">
            </label>
            <button id="showZoom">显示</button>
            <br>
            <label for="province">
                当前位于:
                <input type="text" id="province" value="">
            </label><br>
            <label for="">
                去往中心区：
                <input type="text" id="xNode" placeholder="请输入xNode">
                <input type="text" id="yNode" placeholder="请输入yNode">
                <button id="goZoomBtn">确定</button>
            </label>
            <label for="cityNode">
                去往地点：
                <input type="search" id="cityNode" value="" placeholder="请输入城市">
                <button id="goCityBtn">确定</button>
                <!-- <ul id="searchBox"></ul> -->
            </label>


        </div>
    </div>
    <div class="info">
        <div class="input-item">
            <div class="input-item-prepend">
                <span class="input-item-text" style="width:10rem;">请输入关键字</span>
            </div>
            <input id='input' type="text" value='北京'>
        </div>
        <p><span id="input-info"></span></p>
    </div>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key='你的key'&plugin=AMap.Autocomplete">
    </script>
    <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/jquery-1.11.1.min.js">
    </script>
    <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/underscore-min.js">
    </script>
    <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/js/backbone-min.js"></script>
    <script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
    <script>
        //初始化地图
        var map = new AMap.Map('container', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: 11, //初始地图级别
        });
        map.on('moveend', function () {
            map.getCity(function (info) {
                // console.log(info);
                let province = document.querySelector('#province')
                if (info.city == ''&&info.province=='') {
                    province.value = '当前不在可查询国界内的城市地界上'
                } else {
                    province.value = info.province + info.city + info.district
                }

            })
        })
        //通过事件来给予中心点
        goZoomBtn.onclick = function () {
            map.setCenter([xNode.value, yNode.value])
        }
        // //通过事件来给予显示地图级别
        showZoom.onclick = function () {
            map.setZoom(zoomVal.value)
        }

        // 获取输入提示信息
        function autoInput() {
            var keywords = document.getElementById("input").value;
            AMap.plugin('AMap.Autocomplete', function () {
                // 实例化Autocomplete
                var autoOptions = {
                    city: '全国'
                }
                var autoComplete = new AMap.Autocomplete(autoOptions);
                autoComplete.search(keywords, function (status, result) {
                    // 搜索成功时，result即是对应的匹配数据
                    var node = new PrettyJSON.view.Node({
                        el: document.querySelector("#input-info"),
                        data: result
                    });
                })
            })
        }

        autoInput();

        document.getElementById("input").oninput = autoInput;
    </script>
</body>

</html>