高德地图

一.申请key（略）

二.创建地图

1. 显示地图

1）显示以某点为中心的地图


var map = new AMap.Map('container', {

resizeEnable: true,

zoom:11,

center: [116.397428, 39.90923]       //地点的坐标

            });

2）加载地图javascript api

a. 从页面直接引入：

            （使用htmls方式加载地图）

            <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

b 异步加载javascript api

  <script>

  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：是否显示楼层切换控件，默认是false  

   opacity:图层透明度[0-1]

   zindex：图层叠加的顺序值，0为最低，默认为1

   cursor：指定鼠标停在店铺面时，鼠标的样式

   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);

最后编辑于：2018.11.16 15:47:12