高德地图(AMap)JavaScript API的使用
申请JSAPI的开发者key
申请地址:http://lbs.amap.com/dev/key
引入高德地图JavaScript API文件:
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
创建地图容器
在页面body里你想展示地图的地方创建一个div 容器,并指定id标识:
<div id="container"></div>
指定容器大小
按照需要设定地图容器的大小,确保大小合适,比如用CSS这样设置它:
#container {width:300px; height: 180px; }
创建地图
设定地图的中心点和级别
我们一般需要给地图按需设定中心点和坐标等属性,这里可以通过两种方式,第一种,直接在地图初始化的时候传入相关属性,center属性的值可以使经纬度的二元数组,也可以是AMap.LngLat对象,要求经度值在前,纬度值在后:
- var map = new AMap.Map('container',{
- zoom: 10,
- center: [116.39,39.9]
- });
也可以在地图初始化过后,任何需要的地方通过方法来改变地图的中心点和级别
- var map = new AMap.Map('container');
- map.setZoom(10);
- map.setCenter([116.39,39.9]);
map基本参数:
layers | Array | 地图图层数组,数组可以是图层 中的一个或多个 |
zoom | Number | 地图显示的缩放级别,若center与level未赋值,地图初始化默认显示用户所在城市范围 |
center | LngLat | 地图中心点坐标值(自V1.3.0起变更为view对象中的center属性) |
zooms | Array | 地图显示的缩放级别范围,在PC上,默认为[3,18],取值范围[3-18];在移动设备上,默认为[3-19],取值范围[3-19] |
lang | String | 地图语言类型,可选值:zh_cn:中文简体,en:英文,zh_en:中英文对照 |
cursor | String | 地图默认鼠标样式。参数cursor应符合CSS的cursor属性规范 |
animateEnable | Boolean | 地图平移过程中是否使用动画(如调用panBy、panTo、setCenter、setZoomAndCenter等函数 |
isHotspot | Boolean | 是否开启地图热点,默认false 不打开 (自v1.3 新增) |
rotateEnable | Boolean | 地图是否可旋转,默认false (自v1.3 新增) |
resizeEnable | Boolean | 是否监控地图容器尺寸变化,默认值为false |
dragEnable | Boolean | 地图是否可通过鼠标拖拽平移,默认为true。此属性可被setStatus/getStatus 方法控制 |
zoomEnable | Boolean | 地图是否可缩放,默认值为true。此属性可被setStatus/getStatus 方法控制 |
doubleClickZoom | Boolean | 地图是否可通过双击鼠标放大地图,默认为true。此属性可被setStatus/getStatus 方法控制 |
keyboardEnable | Boolean | 地图是否可通过键盘控制,方向键控制地图平移,"+"和"-"可以控制地图的缩放 |
jogEnable | Boolean | 地图是否使用缓动效果,默认值为true。此属性可被setStatus/getStatus 方法控制 |
scrollWheel | Boolean | 地图是否可通过鼠标滚轮缩放浏览,默认为true。此属性可被setStatus/getStatus 方法控制 |
touchZoom | Boolean | 地图在移动终端上是否可通过多点触控缩放浏览地图,默认为true |
mapStyle | String | 设置地图样式,支持normal(默认样式)、dark(深色样式)、light(浅色样式)、fresh(osm样式) |
features | Array | 设置地图上显示的元素种类,支持bg(地图背景)、point(兴趣点)、road(道路)、building(建筑物) |
添加点标记
创建好地图之后,我们就可以在地图上添加点标记了,用来标注任何用户感兴趣的位置和信息,这里使用到了AMap.Marker这个类。
点标记的创建与添加
同地图一样,点标记可以在创建的时候设定位置等属性,如果设定了map属性的话,marker点将被立即添加到地图上:
- var marker = new AMap.Marker({
- position: [116.480983, 39.989628],
- map:map
- });
也可以在创建之后按需更改这些属性:
- var marker = new AMap.Marker();
- marker.setMap(map);
点标记的移除
移除的话,同样使用setMap方法,不传参数或者传入空参数:
marker.setMap();
Marker参数详情
参数名称 | 类型 | 说明 |
---|---|---|
map | Map | 要显示该marker的地图对象 |
position | LngLat | 点标记在地图上显示的位置,默认为地图中心点 |
offset | Pixel | 位置偏移量,默认值为Pixel(-10,-34)。(0,0)时marker左上角对准position的位置,该属性表示将marker移动多少像素之后,可以使锚点对准position |
icon | String/Icon | 需在点标记中显示的图标。可以是一个本地图标地址,或者Icon对象。有合法的content内容时,此属性无效 |
content | String/Object | 点标记显示内容,可以是HTML要素字符串或者HTML DOM对象。content有效时,icon属性将被覆盖 |
topWhenClick | Boolean | 鼠标点击时marker是否置顶,默认false ,不置顶(自v1.3 新增) |
topWhenMouseOver | Boolean | 鼠标移进时marker是否置顶,默认false,不置顶(自v1.3 新增) |
draggable | Boolean | 设置点标记是否可拖拽移动,默认为false |
raiseOnDrag | Boolean | 设置拖拽点标记时是否开启点标记离开地图的效果 |
cursor | String | 指定鼠标悬停时的鼠标样式,自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor |
visible | Boolean | 点标记是否可见,默认为true |
zIndex | Number | 点标记的叠加顺序。地图上存在多个点标记叠加时,通过该属性使级别较高的点标记在上层显示,默认100 |
angle | Number | 点标记的旋转角度支持IE9及以上版本 |
autoRotation | Boolean | 是否自动旋转。点标记在使用moveAlong动画时,路径方向若有变化,点标记是否自动调整角度,默认false,IE8以下不支持 |
animation | String | 点标记的动画效果,默认值:“AMAP_ANIMATION_NONE”。可选值:“AMAP_ANIMATION_NONE”,无动画效果;“AMAP_ANIMATION_DROP”,点标掉落效果;“AMAP_ANIMATION_BOUNCE”,点标弹跳效果 |
shadow | Icon | 点标记阴影,不设置该属性则点标记无阴影 |
title | String | 鼠标滑过点标记时的文字提示,不设置则鼠标滑过点标无文字提示 |
clickable | Boolean | 点标记是否可点击 |
bubble | Boolean | 默认false,true的时候事件可以穿透到地图 |
shape | MarkerShape | 设置Marker的可点击区域,在定义的区域内可触发Marker的鼠标点击事件 |
extData | Any | 用户自定义属性,支持JavaScript API任意数据类型,如Marker的id等 |
Marker的方法
方法 | 返回值 | 说明 |
---|---|---|
getOffset( ) | Pixel | 获取Marker偏移量(自v1.3 新增) |
setOffset(offset:Pixel) | 设置Marker偏移量(自v1.3 新增) | |
setAnimation(animate:String ) | 设置点标记的动画效果 | |
getAnimation( ) | String | 获取点标记的动画效果类型 |
setClickable(clickable:Boolean ) | 设置点标记是支持鼠标单击事件 | |
getClickable( ) | Boolean | 获取点标记是否支持鼠标单击事件 |
getPosition( ) | LngLat | 获取点标记的位置 |
setPosition(lnglat:LngLat) | 设置点标记位置 | |
setAngle(angle:Number) | 设置点标记的旋转角度 | |
getAngle() | Number | 获取点标记的旋转角度 |
setzIndex(index:Number) | 设置点标记的叠加顺序,默认最先添加的点标记在最底层 | |
setIcon(content:String/Icon) | 设置点标记的显示图标 | |
getIcon( ) | String /Icon | 当点标记未自定义图标时,获取Icon内容 |
setDraggable(draggable:Boolean) | 设置点标记对象是否可拖拽移动 | |
getDraggable( ) | Boolean | 获取点标记对象是否可拖拽移动 |
hide( ) | 点标记隐藏 | |
show( ) | 点标记显示 | |
setCursor(Cursor) | String | 设置鼠标悬停时的光标。 参数cur可为CSS标注中的光标样式 |
setContent(html:String|htmlDOM) | 设置点标记显示内容,可以是HTML要素字符串或者HTML DOM对象 | |
getContent( ) | String | 获取点标记内容 |
moveAlong(lnglatlist,speed,f,circlable) | 以指定的速度,点标记沿指定的路径移动。参数lnglats为路径坐标串;speed为指定速度,单位:千米/小时;回调函数f中可添加自定义功能;参数loop表明是否循环执行动画,默认为false | |
moveTo(lnglat,speed,Function) | 以给定速度移动点标记到指定位置。参数lnglat为指定位置,必设;speed为指定速度,单位:千米/小时;回调函数f中添加自定义功能 | |
stopMove( ) | 点标记停止动画 | |
setMap(map:Map) | 为Marker指定目标显示地图。当参数值取null时,地图上移除当前Marker:setMap(null) | |
getMap() | Map | 获取Marker所在地图对象 |
setTitle(title:String) | 鼠标滑过点标时的文字提示 | |
getTitle( ) | String | 获取点标记的文字提示 |
setTop(isTop:Boolean) | 地图上有多个marker时,当isTop为true时,marker将显示在最前面;当为false时,marker取消置顶 | |
getTop( ) | Boolean | |
setShadow(icon:Icon) | 为marker设置阴影效果 | |
getShadow( ) | Icon | 获取marker的阴影图标 |
setShape(shape:MarkerShape) | 设置marker的可点击区域 | |
getShape( ) | MarkerShape | 获取marker的可点击区域 |
setExtData(ext:Any) | 设置用户自定义属性,支持JavaScript API任意数据类型,如Marker的id等 | |
getExtData( ) | Any | 获取用户自定义属性 |
添加信息窗体
我们也可以用信息窗体InfoWindow类来向用户展示一些更详细的信息,比如点击一个点标记后,通过信息窗体来展示这个点标记在哪里
信息窗体的创建与设定
信息窗体一样可以在创建的时候设定内容、偏移量、大小等属性,offset是信息窗体的锚点以position为基准位置的像素偏移量,content除了使用字符串的形式外也可以直接设定为某个创建好的DOM节点:
- var infowindow = new AMap.InfoWindow({
- content: '<h3>高德地图</h1><div>高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。</div>',
- offset: new AMap.Pixel(0, -30),
- size:new AMap.Size(230,0)
- })
也可以在创建之后按需更改这些属性:
- infowindow.setSize(new AMap.Size(150,50));
- var contentDiv = document.createElement('div');
- contentDiv.innerText='我是信息窗体';
- infowindow.setContent(contentDiv);
如何打开信息窗体
我们可以在信息窗体创建之后立即调用其open方法将它显示在需要的位置:
infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));
也可以通过事件监听,在需要的时候才将信息窗体显示出来,比如在marker被单击的时候显示
- var clickHandle = AMap.event.addListener(marker, 'click', function() {
- infowindow2.open(map, marker.getPosition())
- })
当不再需要点击marker显示信息窗体这个功能的时候,可以通过如下方式移除事件绑定
AMap.event.removeListener(clickHandle);
使用高级信息窗体
除了普通的信息窗体,我们还提供了封装了周边搜索和路线规划功能在内的高级信息窗体,要使用高级信息窗体,首先需要通过plugin方法加载该插件,然后就可以和普通信息窗体一样进行创建和打开了。如果为高级信息窗体制定了panel属性,将在以panel的值为id的div上显示周边搜索或者路线规划的结果,如果需要对高级信息窗体和panel内容的样式进行修改,可以对相应classname的css进行重写:
- AMap.plugin('AMap.AdvancedInfoWindow',function(){
- var infowindow = new AMap.AdvancedInfoWindow({
- content: '<h3 class="title">高德地图</h1>'+
- '<div class="content">高德是中国领先的数字地图内容、'+
- '导航和位置服务解决方案提供商。</div>',
- offset: new AMap.Pixel(0, -30),
- asOrigin:false
- });
- infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));
- })
添加工具条和比例尺
高德地图JSAPI提供了大量丰富的功能控件和服务插件,下面我们来给上面做好的地图添加两个常用的控件,工具条和比例尺。
添加
添加控件的时候首先需要加载插件,同时需要多个插件的时候第一个参数可以设定为控件名称的数组
- AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
- //TODO 创建控件并添加
- })
在回调函数里我们来进行控件的生成和添加:
- AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
- var toolBar = new AMap.ToolBar();
- var scale = new AMap.Scale();
- map.addControl(toolBar);
- map.addControl(scale);
- })
移除
要移除控件的时候调用地图的removeControl方法即可
map.removeControl(toolBar);
高德地图(AMap)JavaScript API的使用的更多相关文章
- react中使用高德地图的原生API
干货,无话 1.react-create-app,创建新react项目 2.npm install react-amap,引入高德地图的封装 3.编写组件index.js import React f ...
- 简单使用高德地图开放平台API
需求说明 输入经纬度,得到城市名 挑选API 使用高德逆地理编码API,点击查看文档 demo <?php /** * 根据输入的经纬度返回城市名称 * @param $longitude 终点 ...
- js调用高德地图的搜索api
var city = $('#city')[0].value; AMap.plugin(['AMap.Autocomplete'],function(){ var autoOptions = { ci ...
- 制作百度地图离线JavaScript API加载本地瓦片地图
全面介绍,请看下列介绍地址,改写目前最新版本的百度V2.0地图,已全面实现离线操作,能到达在线功能的95%以上 http://api.jjszd.com:8081/apituiguang/gistg. ...
- 高德地图api实现地址和经纬度的转换(python)
利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo ...
- 百度&高德地图小区景点边界轮廓实现
经常的我们在使用地图功能时,会发现在选择一个小区或者一个热门景点的时候,地图上面会给出其边界轮廓,能够方便我们知道其范围大小,有时候在我们使用地图组件的时候,也会面临着类似的需求.比如在地图上面标识出 ...
- OpenERP|ODOO高德地图应用
发布时间:2015-04-06 11:01:37来源:http://www.chinamaker.net 在openerp中的fleet模块,每一个车辆都有地图应用.默认采用的是谷歌地图,但是在应用得 ...
- Vue组件篇——Vue3.0中使用高德地图
VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...
- 高德地图POI爬取_Python
高德地图POI 官方文档:https://lbs.amap.com/api/webservice/guide/api/search#introduce 官网控制台:https://lbs.amap.c ...
随机推荐
- 在VMware中创建一个新的虚拟机 ,安装Linux4.X系统 ,之后在此基础上安装openfiler(网络存储管理实用程序)
到此为止虚拟机的前期设置准备好了 下面来为此虚拟机添加iso镜像 (这个是在http://www.openfiler.com/community/download openfiler官网上面下载的) ...
- 0920CSP-S模拟测试赛后总结
依旧挂了. 这次出题人十分良心.白送了180分……于是我没有拿到.130分rank43滚粗了. T1是道sbdp.然而我死想哈希.然后就死在哈希上了. 我简直是个傻子.之前考了几次字符串的题可以用哈希 ...
- STM32硬件错误HardFault_Handler的处理方法
https://blog.csdn.net/electrocrazy/article/details/78173558
- iOS之NSArray类簇简介-(copy、mutableCopy导致程序crash)
1.前言 开发时常常用数组对数据进行处理,对NSMutableArray进行操作时经常导致程序崩溃,特研究一下NSArray的类簇!涉及__NSPlaceholderArray.__NSArray0. ...
- iOS开发之SceneKit框架--SCNAction.h
1.SCNAction简介 主要负责节点SCNNode的属性,实现node的渐变.移动.出现.消失.实现动画等. 2.相关API 节点的移动(earthNode的初始坐标(5,0,0)) //从当前位 ...
- Python入门教程 超详细1小时学会Python
Python入门教程 超详细1小时学会Python 本文适合有经验的程序员尽快进入Python世界.特别地,如果你掌握Java和Javascript,不用1小时你就可以用Python快速流畅地写有用的 ...
- USACO 2009 Open Grazing2 /// DP+滚动数组oj26223
题目大意: 输入n,s:n头牛 s个栅栏 输入n头牛的初始位置 改变他们的位置,满足 1.第一头与最后一头的距离尽量大 2.相邻两头牛之间的距离尽量满足 d=(s-1)/(n-1),偏差不超过1 3. ...
- seienium基础(测试脚本中的等待方法)
测试脚本中的等待方法 一.加等待时间的目的 等待是为了使脚本执行更加稳定 二.常用的休眠方式 第一种 sleep(): 设置固定休眠时间.python 的 time 包提供了休眠方法 sleep() ...
- mongodb 3.2 yaml 配置详解及范例
mongodb3.x版本后就是要yaml语法格式的配置文件,下面是yaml配置文件格式如下:官方yaml配置文件选项参考:https://docs.mongodb.org/manual/ ... #c ...
- spring:常用的注解
bean.xml中配置依赖 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...