示例中心
功能在线体验
控制台
您现在的位置: 开发 > 地图 JS API > 开发指南 > 创建地图 > 室内地图 >

高德 开发 地图 JS API 开发指南 创建地图 室内地图

更新时间:2018年03月12日

亲手试一试

高德地图JavaScript API提供了室内地图的展示功能,在一些浏览器中我们会自动为地图添加和展示室内地图图层,开发者也可以自行加载室内图层插件,做室内地图单独展示或者叠加展示。

参数详情

参数名称

类型

说明

hideFloorBar

Boolean

是否显示楼层切换控件,默认值:false

opacity

Number

图层透明度,取值范围[0,1],0表示完全透明,1表示不透明

zIndex

Number

图层叠加的顺序值,0表示最底层,室内地图默认为11

cursor

String

指定鼠标悬停到店铺面时的鼠标样式,自定义cursor

alwaysShow

Boolean

默认false,默认情况下室内图仅在有矢量底图的时候显示

场景一、使用默认室内地图

目前,高德地图JSAPI已经在很多浏览器中开启了矢量地图绘制,在这些浏览器上,我们默认会为地图添加和展示室内地图(目前仅限PC端,且在有矢量地图展示的时候才显示)。当地图在合适的级别下,移动到有室内地图的地方就会自动显示室内地图了。

实现方法

我们只需要将地图设定到合适的位置就可以展示室内图了:

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

场景二、单独或者叠加显示某个商场的室内地图

如果你是某团购APP的负责人,为了让消费者快速准确的找到商家在楼内的位置,这时候就可以使用室内地图的功能,具体实现方法如下:

实现方法

要实现上述功能,首先引入室内地图插件,初始化室内地图对象,通过设置地图的layers属性(这里将地图设置为只显示室内地图)。在室内地图对象的complete事件回调里,通过设定室内建筑ID使地图显示到指定的室内区域,这里我们展示朝阳大悦城:

AMap.plugin(['AMap.IndoorMap'], function() {
  var indoorMap = new AMap.IndoorMap({alwaysShow:true});
  //设定在没有矢量底图的时候也显示,默认情况下室内图仅在有矢量底图的时候显示
  var map = new AMap.Map('mapDiv', {
      resizeEnable: true,
      showIndoorMap:false,//隐藏地图自带的室内地图图层
      layers:[indoorMap]
   });
  indoorMap.on('complete', function() {
    indoorMap.showIndoorMap('B000A856LJ');
  })
});

我们可以在showIndoorMap方法里同时指定室内地图的展示楼层为商铺对应的楼层,比如联想专卖店在朝阳大悦城的五层:

indoorMap.showIndoorMap('B0FFFAB6J2',5);

我们也可以将室内地图和其他图层叠加使用,只需要修改上面示例代码中map的layers属性或者调用其他图层的setMap方法:

layers:[indoorMap,new AMap.TileLayer()]
//或者  new AMap.TileLayer().setMap(map);
移动端
示例中心
功能
在线体验
常见问题