高德地图(AMap)JavaScript API的使用 |
您所在的位置：网站首页 › 高德地图里面的设置在哪里找 › 高德地图(AMap)JavaScript API的使用 |
|
申请JSAPI的开发者key
申请地址：http://lbs.amap.com/dev/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); |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |