为了账号安全,请及时绑定邮箱和手机立即绑定

高德地图 Javascript API 入门(一)

2017.02.28 22:09 8065浏览
高德地图 Javascript API 入门(一)
准备工作

首先注册个开发者账号

image

然后创建应用,获取Key

image

新建HTML文件,在body标签中引入如下代码(把你的Key值填入即可)

HTML

    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

创建设置地图容器

HTML

    <div id="container"></div>  

CSS

    #container {width:300px; height: 180px; }  
地图初始化

创建地图

JS

    var map = new AMap.Map('container');

设置地图参数

可以通过以下设置
JS

    var map = new AMap.Map('container',{
        zoom: 12,
        center: [112.549248,37.852135]
    });

也可通过map对象的方法设置

JS

    var map = new AMap.Map('container');
    map.setZoom(12);
    map.setCenter([112.549248,37.852135]);

预览

image

个性化地图

改变地图样式

目前支持五种地图配色模版

地图类型列表
<table style="width:100%;border-collapse:collapse;"><tbody><tr><th>名称</th><th>说明</th></tr><tr><td>normal</td><td>默认样式</td></tr><tr><td>dark</td><td>深色样式</td></tr><tr><td>blue_night</td><td>夜空蓝样式</td></tr><tr><td>fresh</td><td>浅色样式</td></tr><tr><td>light</td><td>osm清新风格样式</td></tr></tbody></table>

可以这样设置
JS

    var map = new AMap.Map('container', {
        resizeEnable: true,
        mapStyle:'fresh',
        center: [116.408075, 39.950187]
    });

也可以这样设置
JS

    map.setMapStyle("fresh");

预览

image

显示指定地图内容(地图要素)

<table style="width:100%;border-collapse:collapse;"><tbody><tr><th>名称</th><th>说明</th></tr><tr><td>bg</td><td>背景地图</td></tr><tr><td>point</td><td>兴趣点</td></tr><tr><td>road</td><td>道路</td></tr><tr><td>building</td><td>建筑</td></tr></tbody></table>

JS

    map.setFeatures("road");//单一种类要素显示
    map.setFeatures(['road','point'])//多个种类要素显示

预览(只显示道路要素的地图)

image

地图控件

JavaScript API提供了工具条、比例尺、定位、鹰眼、基本图层切换等常用的控件

<table style="width:100%;border-collapse:collapse;"><tbody><tr><th>名称</th><th>类名</th><th>简介</th></tr><tr><td>工具条</td><td>ToolBar</td><td>集成了缩放、平移、定位等功能按钮在内的组合控件</td></tr><tr><td>比例尺</td><td>Scale</td><td>展示地图在当前层级和纬度下的比例尺</td></tr><tr><td>定位</td><td>Geolocation</td><td>用来获取和展示用户主机所在的经纬度位置</td></tr><tr><td>鹰眼</td><td>OverView</td><td>在地图右下角显示地图的缩略图</td></tr><tr><td>类别切换</td><td>MapType</td><td>实现默认图层与卫星图、实施交通图层之间切换的控</td></tr></tbody></table>

添加控件

JS

    map.plugin(["AMap.ToolBar"],function () {
        map.addControl(new AMap.ToolBar()); // 工具条控件
    });

(其他控件添加方式同上)

预览(带有工具条控件的地图)

image


参考来源:http://lbs.amap.com/
作者:Yangfan

点击查看更多内容
36人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消