高德地图1---地图加载、标记地点、信息窗体

原创 2017年01月03日 18:15:39

项目需要用到高德地图,故研究了一下高德的jsApi,近几天闲来无事,将其常用功能分类从高德地图API上搬过来,以便日后查阅。
要使用高德就需要有一个高德的key值,并引入其js脚本,这在高德API里就有详细的描述,不做过多赘述。

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> 
  • 地图加载
    显示地图就要有一个容器去承载地图,使用到高德地图的Map类构造一个地图(详见高德地图API参考手册–地图),在这里只展示我自己常使用的属性及方法。

    【常用属性】

    • layers【Array】:地图图层数组,数组可以是图层 中的一个或多个,默认为普通二维地图。
    • zoom【Number】:地图显示的缩放级别,若center未赋值,地图初始化默认显示用户所在城市范围 (取值范围在(pc上默认为3-18;移动端默认为3-19)以内。P.S 值越小显示区域越大
    • center【LngLat】:地图中心点坐标值(该数据类型为高德地图的一个基础类,其值为一个包含经度、纬度的数组,如 [116.397428, 39.90923]为北京的经纬度)
    • zooms【Array】:地图显示的缩放级别范围(取值范围同zoom,如[3,18])
    • animateEnable【Boolean】:地图平移过程中是否使用动画,默认为true
    • zoomEnable【Boolean】:地图是否可缩放,默认值为true
    • doubleClickZoom【Boolean】:地图是否可通过双击鼠标放大地图,默认为true
    • resizeEnable【Boolean】:是否监控地图容器尺寸变化,默认值为false

    【常用方法】

    • getZoom( )【Number】:获取当前地图缩放级别
    • getLayers( )【Array 】:获取地图图层数组,数组为一个或多个图层
    • getCity(callback:function(result))【{province,city,citycode,district}】获取地图中心点所在区域,回调函数返回对象属性分别对应为{省,市,区/县}
    • setZoom(level:Number): 设置地图显示的缩放级别
    • add(overlayers:Array):添加地图覆盖物数组,数组为一个或多个覆盖物。
    • remove(overlayers:Array):删除地图覆盖物数组,数组为一个或多个覆盖物。
    • setCenter(position:LngLat): 设置地图显示的中心点
    • setZoomAndCenter(zoomLevel:Number,center:LngLat):地图缩放至指定级别并以指定点为地图显示中心点
    • setCity(city:String,callback:Functon):按照行政区名称设置地图显示的中心点,行政区名称支持中国、省、市、区/县。*建议不要同时使用center/setCenter()和setCity(),如一起使用程序将以setCity()作为最后结果*P.S 城市值可为城市全称或者该城市的6位城市通用编码
    • setFitView(overlayList:Array): 根据地图上添加的覆盖物分布情况,自动缩放地图到合适的视野级别,参数overlayList默认为当前地图上添加的所有覆盖物图层
    • clearMap( ):删除地图上所有的覆盖物

    【例】显示已北京为中心,缩放级别为11的地图

    <script>
        var map = new AMap.Map('container', {
            zoom:11,
            center: [116.397428, 39.90923]
        });//container为地图容器id
    </script>
  • 点标记
    标记地点使用Mark类(详见参考手册–覆盖物) 常用属性及方法过多,只列出一部分,其他不赘述。
    【属性】

    • offset【 Pixel】:点标记显示位置偏移量,默认值为Pixel(-10,-34)。Marker指定position后,默认以marker左上角位置为基准点,对准所给定的position位置,若需使marker指定位置对准在position处,需根据marker的尺寸设置一定的偏移量。
    • icon【String/Icon】: 需在点标记中显示的图标。可以是一个本地图标地址,或者Icon对象。有合法的content内容时,此属性无效
    • content【String/Object】:点标记显示内容,可以是HTML要素字符串或者HTML DOM对象。content有效时,icon属性将被覆盖
    • draggable【Boolean】:设置点标记是否可拖拽移动,默认为false
    • extData【Any】:用户自定义属性,支持JavaScript API任意数据类型,如Marker的id等

    【方法】

    • set/getPosition( ): 设置/获取点标记的位置
    • set/getIcon(content:String/Icon):设置/获取点标记的显示图标。
    • set/getDraggable( ):设置/获取点标记对象是否可拖拽移动
    • set/getContent:设置/获取点标记显示内容,可以是HTML要素字符串或者HTML DOM对象
    • set/getMap(map:Map): 设置/获取Marker所在地图对象

【例】在上面已建好的地图上添加点标记

var marker = new AMap.Marker({
        map:map,//要显示该marker的地图对象(或者构造完成后使用marker.setMap(map)标记至地图)
        icon: "//这里设置标记图标地址",
        position: [116.405467, 39.907761]//标记位置
     });
  • 信息窗体
    信息窗体使用的是InfoWindow 类(详见参考手册-信息窗体特别提示:地图上只允许同时展示1个信息窗体;
    【常用属性】

    • isCustom【Boolean】: 是否自定义窗体。设为true时,信息窗体外框及内容完全按照content所设的值添加(默认为false,即在系统默认的信息窗体外框中显示content内容)
    • autoMove【Boolean】:是否自动调整窗体到视野内(当信息窗体超出视野范围时,通过该属性设置是否自动平移地图,使信息窗体完全显示)
    • closeWhenClickMap【Boolean】:控制是否在鼠标点击地图后关闭信息窗体,默认false,鼠标点击地图后不关闭信息窗体
    • content【String/HTMLElement】:显示内容,可以是HTML要素字符串或者HTMLElement对象
    • offset【Pixel】:相对于基点的偏移量。默认情况是信息窗体的底部中心点(BOTTOM_CENTER) 和基点之间的偏移量
    • position【LngLat】:信息窗体显示基点位置
    • showShadow【 Boolean】: Boolean 控制是否显示信息窗体阴影,取值false时不显示窗体阴影,取值true时显示窗体阴影。默认值:false

    【常用方法】

    • open(map:Map,pos:AMap.LngLat):在地图的指定位置打开信息窗体
    • close( ):关闭信息窗体
    • setContent(content:String|htmlDOM):设置信息窗体内容,可通过该函数动态更新信息窗体中的信息
    • setPosition(lnglat:LngLat):设置信息窗体显示基点位置

    【例】

//使用上面例子已有的地图和点标记
 var infoWindow = new AMap.InfoWindow({
   isCustom: true,  //使用自定义窗体
    content: "<p>自定义窗体的内容</p>",
    offset: new AMap.Pixel(16, -45)//窗体位置的偏移量
});
//当点击点标记时出现信息窗体
 AMap.event.addListener(marker, 'click', function() {
     infoWindow.open(map, marker.getPosition());
  });

以上就是最基本的加载地图,标记地点以及显示信息窗体。

版权声明:本文为博主原创文章,未经博主允许不得转载。

高德地图(AMap)JavaScript API的使用

点击打开链接转载: 申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: 创建地图容器 在页面b...
  • xqhys
  • xqhys
  • 2017年06月29日 17:39
  • 679

百度地图API功能给多个点添加信息窗口

body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{width:100%;height:500px;...
  • liu3348
  • liu3348
  • 2015年08月28日 16:17
  • 2663

高德地图实现多点标注marker和动态信息窗体

先说一下项目对地图的需求:在后台新增地图管理模块,要求,每一辆车都在地图上有标注,而且点击标注时要显示出车辆的相关信息,比如车牌和车辆的当前状态。 下图就是实现的效果。 当然从高德地图api也能...
  • well2049
  • well2049
  • 2017年08月05日 09:04
  • 2209

[点击图标 标记为星标记事] 学习资料

http://publib.boulder.ibm.com/infocenter/tivihelp/v2r1/index.jsp?topic=/com.ibm.IBMDI.doc/adminguide...
  • zztp01
  • zztp01
  • 2010年08月25日 14:11
  • 632

手把手教你高德基础地图+定位+设置Marker实现

一、基础地图部分 1.获取APPKey 在高德地图注册开发者账号,然后创建应用,使用SHA1和PackageName得到Key 2.下载SDK 下载地址:http://lbs.amap.c...
  • pan960821
  • pan960821
  • 2016年03月17日 13:38
  • 55559

Android高德地图自定义信息窗

随着毕业季的来临,最近忙起来,不仅仅是学习和毕设方面,还有工作事宜以及同学聚会等等,博客搁置了好久都没有更新。今天公司让写一个基于高德地图的小demo考察一下最近学习状况,虽然简单,但是还是有一些值得...
  • s1674521
  • s1674521
  • 2017年06月01日 15:03
  • 1231

高德地图-设置点标注的文本标签

1、问题背景     高德地图中,设置选中位置,并自定义图标和文字提示2、实现源码 高德地图-设置点标注的文本标签 ...
  • you23hai45
  • you23hai45
  • 2016年05月24日 23:47
  • 10326

高德地图显示自定义信息窗体

高德地图显示自定义信息窗体
  • u013076044
  • u013076044
  • 2016年10月15日 20:34
  • 2485

(原) 高德地图

高德地图有两个key 一个web一个js 要用js的key 1:显示地图 map = new AMap.Map('map', { resizeEnable: true, ...
  • ouyangxie
  • ouyangxie
  • 2017年01月19日 09:09
  • 859

vue2(webpack)调用amap高德地图及其UI组件

vue2(webpack)调用amap高德地图及其UI组件和标记物 今天一个app项目中要使用vue2加入高德地图,本来以为有第三方的插件,结果没找到适合自己用的,因为地图这块,一般都是自定义程度比...
  • yp090416
  • yp090416
  • 2017年07月09日 18:51
  • 55365
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:高德地图1---地图加载、标记地点、信息窗体
举报原因:
原因补充:

(最多只允许输入30个字)