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

项目需要用到高德地图，故研究了一下高德的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)：设置信息窗体显示基点位置

【例】
a0c7

//使用上面例子已有的地图和点标记
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());
});

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