高德地图API练习

最新推荐文章于 2025-05-23 17:54:36 发布

伪伪的喵喵

最新推荐文章于 2025-05-23 17:54:36 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_32392057/article/details/60325691

前端练习专栏收录该内容

12 篇文章

订阅专栏

高德地图API练习

通过对高得地图API的练习使用，对如何在网页中使用地图有了初步的认识，同时再次认识到学好javascript的重要性。

使用方法

获取API链接

这里写图片描述

选择javaScript API
选择获取API
注册
创建新应用，并获取Key值
选择实例中心

这里写图片描述
- 参考示例代码进行开发

效果图

这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <meta name="keyword" content="">
    <meta name="description" content="">
    <style>
        body, html {
            width: 100%;
            height: 100%;
        }
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: url(images/bg.png) no-repeat center top;
            background-size: auto 100%;
        }
        .container {
            position: relative;
        }
        .header {
            width: 1000px;
            height: 80px;
            /*background: #ddd;*/
            margin: 0px auto;
        }
        .header h1 a {
            margin-top: 15px;
            float: left;
        }
        .header span {
            font-size: 20px;
            color: #fff;
            line-height: 80px;
            text-align: center;
            float: right;
        }
        .container .text {
            width: 1000px;
            height: 60px;
            background: #f26621;
            color: #fff;
            text-align: center;
            line-height: 60px;
            margin: 0 auto;
            font-size: 25px;
        }
        .container .map {
            width: 1000px;
            height: 480px;
            background: #fff;
            margin: 0 auto;
        }
        .search {
            width: 650px;
            height: 50px;
            position: absolute;
            top: 100px;
            left: calc(50% - 325px);
            background: red;
        }
        .search .searchbox {
            width: 550px;
            height: 50px;
            border: none;
            outline: none;
            text-indent:15px;
            float: left;
        } 
        .search .searchbutton {
            width: 100px;
            height: 50px;
            border: none;
            outline: none;
            color: #fff;
            background: red;
            float: left;
        } 
        .info-title{
            color: white;
            font-size: 14px;
            background-color: blue;
            line-height: 26px;
            padding: 0px 0 0 6px;
            font-weight: lighter;
            letter-spacing: 1px
        }
        .info-content{
            padding: 4px;
            color: #666666;
            line-height: 23px;
            font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
        }
        .info-content img{
            float: left;
            margin: 3px;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="header">
            <h1><a href="#"><img src="images/logo.png" alt=""></a></h1>
            <span>LBS移动点餐</span>
        </div>
        <div class="container">
            <div class="text">点外卖，上饿了么!</div>
            <div class="map" id="map">

            </div>
            <div class="search">
                <input type="text" class="searchbox" id="tipinput" placeholder="请输入地址。。"><input type="button" class="searchbutton" value="搜索">
            </div>
            <div id="tip">鼠标点击热点试试</div>
        </div>
    </div>
    <script src="http://webapi.amap.com/maps?v=1.3&key=86837226df1f8bc273873758dd5f3c45&plugin=AMap.PlaceSearch,AMap.AdvancedInfoWindow,AMap.Autocomplete"></script>
    <script>
        var map = new AMap.Map('map', {
            resizeEnable: true,
            zoom:11,
            center: [116.397428, 39.90923]

        });
        var placeSearch = new AMap.PlaceSearch();  //构造地点查询类
        var infoWindow=new AMap.AdvancedInfoWindow({});
        map.on('hotspotclick', function(result) {
            placeSearch.getDetails(result.id, function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                    placeSearch_CallBack(result);
                }
            });
        });
        //回调函数
        function placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat);
            var poiArr = data.poiList.pois;
            var location = poiArr[0].location;
            infoWindow.setContent(createContent(poiArr[0]));
            infoWindow.open(map,location);
        }
        function createContent(poi) {  //信息窗体内容
            var s = [];
            s.push('<div class="info-title">'+poi.name+'</div><div class="info-content">'+"地址：" + poi.address);
            s.push("电话：" + poi.tel);
            s.push("类型：" + poi.type);
            s.push('<div>');
            return s.join("<br>");
        }
        var autoOptions = {
        input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        map: map
    });  //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
    }
    </script>
</body>
</html>