高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)

使用高德地图在很多时候需要在地图上标记位置，并且很多时候需要用到自定义的图标去完成这种位置的标记。

当然，这些功能高德地图都为我们准备了，比如常用的地图覆盖物Marker和信息窗体等。这里就先说一下点标记的Marker。

Marker是一个用来往地图上添加点标记的类。使用它将任何你希望用户看到的兴趣点标注在地图上，你可以为标注指定任意的Icon或者内容，以及文字Label。下面向大家介绍如何使用Marker来构建一个丰富的地图应用。

建立一个最简单的Marker标记，我们只需要设置两个参数，分别是他的经纬度位置和所要添加到的map对象。

position是要添加的marker的经纬度，可以使用LngLat对象，如 new AMap.LngLat(116.39,39.9);

也可以直接使用经度和纬度构成的一次二元数组，如[116.39,39.9]。

一、首先还是要加载地图；

 var map = new AMap.Map('container',{resizeEnable: true,      //可缩放zoom:12,           //缩放级别center:[119.1664,29.02523]    //位置中心点});

二、加载Marker

 marker = new AMap.Marker({position: [lng,lat],     //点标记在地图上显示的位置，默认为地图中心点offset: new AMap.Pixel(-16,-45),//位置偏移量，默认值为Pixel(-10，-34),(0,0)时marker左上角对准position的位置title: data[i].number,       //鼠标滑过标记时的文字提示，不设置则鼠标滑过时没有文字提示map: map           //要显示该Marker的地图对象});

这样就完成了基本的的点标记

介绍一下关于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	获取用户自定义属性

接下来就说一下使用自定义图标的方法，就是上述第二步稍微修改一下即可。

使用自定义Marker需要自定义Icon

marker = new AMap.Marker({icon: "http://vdata.amap.com/icons/b18/1/2.png",            //自定义Icon在项目中的位置
position: [lng,lat],offset: new AMap.Pixel(-16,-45),title: data[i].number,map: map});

但是通常我们使用Icon类来设置marker的icon，因为icon的大小通常和默认marker的大小不一致，对于使用组合图片的开发的来说，这种当时是最合适的，可以通过imageOffset属性来调整图片的显示区域。

这是官方的Demo

var icon = new AMap.Icon({image : 'http://vdata.amap.com/icons/b18/1/2.png',//图片大小为24px*24px//icon可缺省，缺省时为默认的蓝色水滴图标，size : new AMap.Size(24,24)
});

var marker = new AMap.Marker({icon : icon,//24px*24pxposition : provinces[i].center.split(','),offset : new AMap.Pixel(-12,-12),map : map
});

这是我自己项目里面写的代码，根据不同的需求，加载不同的图标，仅供参考

if(operNum < 0.2*maxNumber){var icon = new AMap.Icon({image: 'images/bike/green.png',size: new AMap.Size(32, 45)});
            }

marker = new AMap.Marker({icon: icon,position: [lng,lat],offset: new AMap.Pixel(-16,-45),title: data[i].number+":"+data[i].name+":总数"+data[i].restorecount+":在架"+data[i].rentcount,map: map});

这样就可以使用循环去加载地图上的多个Marker

参数说明：

参数名称	类型	说明
size	Size	图标尺寸，默认值(36,36)
imageOffset	Pixel	图标取图偏移量。当image使用了图片精灵时，可通过size和imageOffset配合，显示图标的指定范围
image	String	图标的取图地址。默认为蓝色图钉图片
imageSize	Size	修改原始图片的大小，将拉伸或压缩图片，等同于CSS中的background-size属性。可用于实现高清屏的高清效果

使用Content方式标记

content属性用来指定作为标记的dom节点或者dom节点的outerHTML，这里使用一个div作为content来为marker多添加一个标记

var content= "<div classname="taiwan">宝岛台湾</div>";
//或者
var content = document.createElement('div');
content.innerHTML = '宝岛台湾';
content.className = 'taiwan';marker = new AMap.Marker({
    content: content,
    position: provinces[i].center.split(','),
    title: provinces[i].name,
    offset: new AMap.Pixel(-10,0),
    map: map});

高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)相关推荐

高德地图Web端JavaScript API开发(一)---个性化展示(自定义地图)
遇到一个功能,需要使用地图功能,但是地图上不要显示太多的物体,不然会遮盖地图上的标记,因此需要自定义地图,去掉一些不需要的覆盖物. 话不多说,直接走步骤! First. 需要登录高德开发者控制台,在地 ...
高德地图 web 端 JS API 遇到的坑及性能优化
[JS API V2.0] 本指望全面提升一下性能,结果发现一些硬伤,迫不得已转到1.4.15版本,先说一下最新的v2.0的问题. 因为务业需要规划线路,但是这个版本中,规划线路,并且经过中间点时,部 ...
vue使用高德地图web端JS API（vue-amap插件）
高德地图地图 JS API v2.0:https://lbs.amap.com/api/jsapi-v2/summary/ vue-amap(基于Vue 2.0和高德地图的地图组件):https:// ...
前端系列——vue2+高德地图web端开发（poi搜索两种方式）
前端系列--vue2+高德地图web端开发(poi搜索) 前言基础什么是poi搜索 1. 输入提示结合poi搜索官方代码步骤 1.进行plugins插件注册 2.data中编写placeSea ...
前端系列——vue2+高德地图web端开发（使用和引入）
vue2+高德地图web端开发(使用和引入) 前言基础准备工作高德地图的个人开发者注册高德api网址 1.点击进行注册 2.注册完之后进入控制台 3.创建新应用 4.添加高德 2.0 新增 ...
前端系列——vue2+高德地图web端开发（行政区边界绘制）
vue2+高德地图web端开发(行政区边界绘制) 前言原理基础实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
高德地图JavaScript API开发研究
高德地图JavaScript API开发研究原文:高德地图JavaScript API开发研究高德地图JavaScript API是一套用JavaScript 语言编写的应用程序接口,可以通过各种 ...
高德地图API开发二三事（一）如何判断点是否在折线上及引申思考
最近使用高德地图 JavaScript API 开发地图应用,提炼了不少心得,故写点博文,做个系列总结一下,希望能帮助到LBS开发同胞们. 项目客户端使用高德地图 JavaScript API,主要业 ...
深入浅出 Javascript API（二）--地图显示与基本操作转
深入浅出 Javascript API(二)--地图显示与基本操作地图显示与基本操作(放大.缩小.移动.坐标显示)是JavascriptAPI的基本功能,也是一个WebGIS应用的基本内容,Java ...

高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)

高德地图Web端JavaScript API开发(二)---在地图上绘制(点标注)相关推荐

最新文章

热门文章