高德地图API---<一> 地图控件与插件

最新推荐文章于 2024-08-05 16:18:06 发布

田小思

最新推荐文章于 2024-08-05 16:18:06 发布

阅读量5.6k

点赞数 2

分类专栏：地图APi 文章标签： javascript 高德地图 api 地图高德

本文链接：https://blog.csdn.net/tian_123456789/article/details/56497643

版权

地图APi 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

高德地图 JavaScript API，是由 JavaScript 语言编写的应用程序接口，它能够帮助您在网站或移动端中构建功能丰富、交互性强的地图应用程序。除了基本地图功能的接口外，JavaScript API还提供了诸如地点搜索、路线规划、定位、地址解析、行政区查询等数据服务。

首先在使用高德地图时要先进行账号与Key的申请

注册成为高德开发者需要分三步：

第一步，注册高德开发者；第二步，去控制台创建应用；第三步，获取Key。

具体步骤可参看下图

在申请完key值之后就可以使用其中高德地图中有许多控件和插件提供给大家使用下面是一个小例子：

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
        body,html,#container{
            height: 100%;
            margin: 0px;
        }
    </style>
    <title>高德地图</title>
</head>
<body><div id="container" tabindex="0"></div>
<div id="zoomin" style="position: absolute; left: 10px; bottom: 120px; width: 60px; height: 40px;z-index: 160; background-color:#008cff;color:#fff; border-radius: 3px; line-height: 40px; text-align: center; cursor: pointer;">放大</div>
<div id="zoomout" style="position: absolute; left: 10px; bottom: 60px; width: 60px; height: 40px;z-index: 160; background-color:#008cff;color:#fff; border-radius: 3px; line-height: 40px; text-align: center; cursor: pointer;">缩小</div>

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=此处输入您自己申请的key值"></script>
<script type="text/javascript">
   /* var map = new AMap.Map('container',{
        zoom: 15//用来设置地图的级别在高德中zoom的取值范围为【3-18】其中值越大显示的越详细，也可以通过setZoom（）来设置
    });*///这个与下面的一样
    var map= new AMap.Map('container');
    map.setCity("北京市");//用来定位那个城市
    map.setZoom(15);

   //进行地图的缩放函数的绑定
    document.getElementById('zoomin').onclick = function(){
        //放大地图
        map.zoomIn();
    };
    document.getElementById('zoomout').onclick = function () {
        //缩小地图
        map.zoomOut();
    };

   ///加载比例尺控件

    map.plugin(['AMap.Scale'], function(){
        var scale = new AMap.Scale();
        map.addControl(scale);
    });

    //加载地图类型

    map.plugin(['AMap.MapType'], function(){
        var type= new AMap.MapType();
        map.addControl(type);
    });

    //加载鹰眼工具

    map.plugin(['AMap.OverView'], function () {
        var view = new AMap.OverView();
        //因为在LBS中鹰眼视图工具默认为BOOL:False,所以在测试时可以用open函数来让它默认为打开；
        view.open();
        map.addControl(view);
    });

    //加载工具条模块

    map.plugin(['AMap.ToolBar'], function(){
        var tool = new AMap.ToolBar();
        map.addControl(tool);
    });
    // 测距工具控件

   //测量面积控件
   map.plugin(['AMap.MouseTool'], function(){
        var tool = new AMap.MouseTool(map);
        tool.measureArea();
    });

 /*  // 测量两点间长度控件
    map.plugin(['AMap.RangingTool'], function () {
        var tool = new AMap.RangingTool(map);
        tool.turnOn();
    })*/

</script>
</body>
</html>

效果图如下