选中回填 高德_高德地图(AMap)JavaScript API的使用

本文档介绍了如何使用高德地图JavaScript API,包括申请开发者key、创建地图、设置地图参数、添加点标记、信息窗体操作以及添加地图工具条和比例尺。详细讲解了地图的初始化、地图控制及信息窗体的创建与显示方法。
摘要由CSDN通过智能技术生成

申请JSAPI的开发者key

引入高德地图JavaScript API文件:

创建地图容器

在页面body里你想展示地图的地方创建一个div 容器,并指定id标识:

指定容器大小

按照需要设定地图容器的大小,确保大小合适,比如用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: '

高德地图

高德是中国领先的数字地图内容、导航和位置服务解决方案提供商。
',

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: '

高德地图'+

'

高德是中国领先的数字地图内容、'+

'导航和位置服务解决方案提供商。

',

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);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值