JS-高德地图开发笔记

一.申请key（略）

二.创建地图

1. 显示地图

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

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

2）加载地图javascript api

a. 从页面直接引入：

            <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script> 
            （使用htmls方式加载地图）
            <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>

b 异步加载javascript api

 <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&callback=init"></script>
    <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);

来源：CSDN

作者：Pan12321

链接：https://blog.csdn.net/Pan12321/article/details/64130530

标签

traffic

地图api