关闭

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

832人阅读 评论(0) 收藏 举报
分类:

项目需要用到高德地图,故研究了一下高德的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());
  });

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2769次
    • 积分:84
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条
    文章存档