高德地图 Javascript API 入门（一）

jone5679 发布于2019-08-20 14:29 / 1757人阅读

摘要：高德地图入门一准备工作首先注册个开发者账号然后创建应用，获取新建文件，在标签中引入如下代码把你的值填入即可您申请的值创建设置地图容器地图初始化创建地图设置地图参数可以通过以下设置也可通过对象的方法设置预览个性化地图改变地图样式目前支持五种地

高德地图 Javascript API 入门（一） 准备工作 首先注册个开发者账号

然后创建应用，获取Key

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

HTML

创建设置地图容器

HTML

CSS

    #container {width:300px; height: 180px; }

地图初始化 创建地图

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

设置地图参数

可以通过以下设置
JS

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

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

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

预览

个性化地图 改变地图样式

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

地图类型列表

名称	说明
normal	默认样式
dark	深色样式
blue_night	夜空蓝样式
fresh	浅色样式
light	osm清新风格样式

可以这样设置 JS

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

也可以这样设置
JS

    map.setMapStyle("fresh");

预览

显示指定地图内容（地图要素）

名称	说明
bg	背景地图
point	兴趣点
road	道路
building	建筑

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

预览（只显示道路要素的地图）

地图控件

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

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

添加控件 JS

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

（其他控件添加方式同上）

预览（带有工具条控件的地图）

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

GPU云服务器云服务器高德地图api接口高德地图api接口文档高德地图高德地图大数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81682.html

高德地图 Javascript API 入门（二）

摘要：鼠标在地图上拉框即可绘制相应的矩形。鼠标在地图上单击绘制量测区域，鼠标左键双击或右键单击结束当前量测操作，并显示本次量测结果。参数设为时，鼠标操作关闭的同时清除地图上绘制的所有覆盖物对象设为时，保留所绘制的覆盖物对象。高德地图 Javascript API 入门（二）鼠标工具插件测量距离 JS map.plugin([AMap.MouseTool],function ()...

dockerclub 2019-08-20 14:29 评论0 收藏0
高德地图 Javascript API 入门（七）

摘要：高德地图入门七热力图插件简单例子显示地图坐标点加载热力图插件预览参数构造函数说明构造一个热力图插件对象，为要叠加热力图的地图对象，属性参考列表中的说明。高德地图 Javascript API 入门（七）热力图插件简单例子 // 显示地图 var map=new AMap.Map(container,{ resizeEnable:true, center:[116....

YuboonaZhang 2019-08-21 11:31 评论0 收藏0
高德地图 Javascript API 入门（六）

摘要：高德地图入门六出行规划公交路径公交换乘服务，提供起终点公交路线规划服务，整合步行方式初始化加载公交线路插件实例化北京必须值，搭乘公交所在城市可选值，搜索结果的标注线路等均会自动添加到此地图上可选值，显示搜索列表的容器可选值，详细信息驾驶策略高德地图 Javascript API 入门（六）出行规划公交路径公交换乘服务，提供起、终点公交路线规划服务，整合步行方式初始化 // 加...

idisfkj 2019-08-20 14:39 评论0 收藏0
高德地图 Javascript API 入门（三）

摘要：高德地图入门三距离测量插件区别虽然鼠标工具插件也提供距离量测功能，但是距离量测插件，提供更为丰富的样式设置功能。高德地图 Javascript API 入门（三）距离测量插件区别虽然鼠标工具插件也提供距离量测功能，但是距离量测插件，提供更为丰富的样式设置功能。加载插件 JS map.plugin([AMap.RangingTool],function () { ...

EdwardUp 2019-08-20 14:29 评论0 收藏0
高德地图 Javascript API 入门（五）

摘要：高德地图入门五搜索服务搜索服务名称说明是否插件输入提示，根据输入关键字提示匹配信息是地点搜索服务插件，提供某一特定地区的位置查询服务是麻点图插件，提供海量搜索结果的辅助显示功能是行政区查询服务，提供行政区相关信息是公交路线服务，提供公交路线高德地图 Javascript API 入门（五）搜索服务搜索服务名称说明是否插件 AMap.Autocomplete 输入提示...

yzzz 2019-08-20 14:36 评论0 收藏0