高德地图高德地图

一.申请key（略）二.创建地图 1. 显示地图 1）显示以某点为中心的地图

var map = new AMap.Map('container', {resizeEnable: true,zoom:11,center: [116.397428, 39.90923]//地点的坐标});

2）加载地图javascript api
a. 从页面直接引入：

（使用htmls方式加载地图）

b 异步加载javascript api

function init(){var map = new AMap.Map('container', {//注意container为选定的div显示容器这限制了地图的区域center: [117.000923, 36.675807],zoom: 6}); map.plugin(["AMap.ToolBar"], function() {map.addControl(new AMap.ToolBar()); }); }

2. 个性化展示 1）设置地图样式

地图样式类型有四种：normal：默认样式dark：深色样式blue_night:夜深色样式fresh：浅色样式light:osm清新风格样式

可以通过setMapStyle()来设置。
2. 设置地图显示内容

地图显示内容有四种：bg:地图背景point:兴趣点road: 道路building:建筑物可以通过map.setFeatures("road",“point”); 设置,可以多个种类要素一起显示

3.地图控件

工具条：ToolBar继承了缩放，平移，定位等功能按钮在内的组合控件比例尺：Scale展示了地图在当前层级与纬度下的比例尺定位：Geolocation 用来获取和展示用户主机所在的经纬度位置鹰眼：OverView 在地图右下角显示地图的缩略图类别切换：Maptype 默认图层与卫星图，实施交通图层之间切换的控var map = new AMap.Map('container',{zoom: 10,center: [116.39,39.9]}); AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],

【高德地图】function(){

map.addControl(new AMap.ToolBar()); map.addControl(new AMap.Scale()); map.addControl(new AMap.OverView({isOpen:true})); });

4. 室内地图

1）参数：hideFloorBar：是否显示楼层切换控件，默认是falseopacity:图层透明度[0-1]zindex：图层叠加的顺序值，0为最低，默认为1cursor：指定鼠标停在店铺面时，鼠标的样式alwaysShow:默认为false 默认情况下室内图仅在有矢量底图的时候显示 2）使用默认的室内地图：由于API已经自带矢量地图，因此只要使用默认的就可以了。var map = new AMap.Map('mapDiv', {resizeEnable: true,center:[116.519942, 39.924677],zoom:18}); 如果需要对室内图做进一步的设定的话，可以在地图indoor_create事件触发之后获取到这个默认的室内地图对象,然后进行需要的操作：map.on('indoor_create',function(){map.indoorMap.showIndoorMap('B000A856LJ',5); })

三.在地图上绘制

覆盖物：Marker和信息窗体图层：默认图层TileLayer默认样式的图层，不使用layers属性的时候无需设置实时交通TileLayer.Traffic用来展示实时路况，可设定刷新频率等卫星TileLayer.Satellite用来展示卫星影像图层路网TileLayer.RoadNet用来展示交通网络，通常与卫星图层叠加使用3D楼块Buildings展示三维效果的建筑物楼块可以通过两种方式设置1）地图初始化时加载var defaultLayer = new AMap.TileLayer(); var traffic = new AMap.TileLayer.Traffic(); var map = new AMap.Map('container',{zoom: 10,layers: [ defaultLayer,//默认图层traffic],//实时交通图层center: [116.39,39.9]}); 2)在地图初始后，通过调用setMap(map)将图层添加到地图上，不需要的时候也可以通过SetMap来移除图层 var defaultLayer = new AMap.TileLayer(); var traffic = new AMap.TileLayer.Traffic(); var map = new AMap.Map('container',{zoom: 10,center: [116.39,39.9]}); traffic.setMap(map);