高德地图Demo

最新推荐文章于 2023-05-26 14:32:44 发布

CookChopper

最新推荐文章于 2023-05-26 14:32:44 发布

阅读量256

点赞数

分类专栏：努力学前端

本文链接：https://blog.csdn.net/hjc13348/article/details/114876824

版权

本文详细介绍了高德地图的多个示例Demo，包括加载插件、地图兴趣点搜索、Autocomplete与PlaceSearch的结合使用、附近搜索功能及自定义标记和2D到3D视图切换等应用场景，旨在帮助开发者更好地理解和运用高德地图API。

摘要由CSDN通过智能技术生成

高德地图Demo1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo3</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=0bcfd2ed49ad1e3bb13961bacb6a7ca8"></script> 
    <style>
        *{
    
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #container{
    
                width:100%;
                height:100%;
                position: absolute;
                left: 0;
                right: 0;
            }
        .control{
    
                width: 320px;
                height: 300px;
                background-color: #fff;
                z-index:99;
                position:fixed;
                left: 40px;
                top: 40px;
                /* text-align: center; */
                padding: 10px;

        }
        .control .title{
    
            width:100%;
            text-align: center;
            font-size: 25px;
            color:#000;
            font-weight:bold;
        }
        .control div{
    
            width:100%;
            margin-top: 10px;
            height: 30px;
        }
        .control span{
    
            display: inline-block;
            width: 100px;
            text-align: right;
        }
        .control input{
    
            width: 100px;
            margin-left: 10px;
        }
        .control button{
    
            width: 50px;
            height: 30px;
            border: none;
            border-radius:5px;
            margin-left: 10px;
            background-color: lightblue;
        }
        #limitbtn{
    
            width: 100px;
            height: 30px;
            background-color: #f5f2fa;
        }
        .control .location #locationvalue{
    
            width: 40px;
        }
        
        .control .location{
    
            font-size: 10px;
            width: 180px;
            position: absolute;
            bottom:5px;
            right: 5px;
        }
    </style>
    
</head>
<body>
    <div class="control"> 
        <div class="title">工具栏</div>
        <div class="cityNode"><span>搜索城市</span><input type="text" id="cityValue"><button id="citybtn">确定</button></div>
        <div class="zoomNode"><span>设置显示级别</span><input type="text" id="zoomValue"><button id="zoombtn">确定</button></div>
        <div class="button"><span>&nbsp;</span><button id="limitbtn">解除限制范围</button></div>
        <div class="location">当前所在省/直辖市:<span id="locationvalue"></span></div>
    </div>
    <div id="container">

    </div>
    <script>
            

            //创建地图应用
            var map = new AMap.Map("container");
            //设置地图显示范围
            var myBounds = new AMap.Bounds([116.22422,39.813285],[116.567542,39.997639]);
            //解除布尔值
            var limitbln = true;
            map.setBounds(myBounds);
            map.setLimitBounds(myBounds);
            map.getCity(function(info){
    
                locationvalue.innerHTML = info.province;
            });

        //点击时获取输入的城市 ,通过setCity()方法设置地图显示在此城市
        citybtn.onclick = function(){
    
            if(cityValue.value == ""){
    
                return;
            }
            map.setCity(cityVal