室内地图JavaScript SDK Hello Fengmap

Hello Fengmap 本单元介绍显示Fengmap地图的最简单的页面示例。

初始化Fengmap SDK

引入 Fengmap JavaScript SDK 库，在您的地图展示页面文件中添加如下代码完成对Fengmap SDK 的初始化：

<script type="text/javascript" src="lib/fengmap.min.js">  </script>

页面元素

在地图展示页面中添加显示地图的页面元素。如下所示：

<div id="fengMap"></div>

显示地图

初始化FMMap对象，使用Fengmap JavaScript SDK 内默认的蜂鸟服务器上的地图和主题，并根据蜂鸟提供的地图数据ID打开地图。

var fmapID = '10347'; //mapId
var map = new fengmap.FMMap({
    container: document.getElementById('fengMap'), //渲染dom
    appName:'蜂鸟研发SDK_2_0',           //开发者应用名称
    key:'57c7f309aca507497d028a9c00207cf8',  //开发者申请应用下web服务的key
});

//打开Fengmap服务器的地图数据和主题
map.openMapById(fmapID);

完整代码

完整示例代码如下所示：

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" charset="UTF-8">
    <title>hello Fengmap</title>
    
    <script src="lib/fengmap.min.js" />
    <style type="text/css">
    body {
        margin:0;
        padding: 0;
        overflow: hidden;
    }
    #fengMap {
        position: absolute;
        width:100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <div id="fengMap"></div>

    <script type="text/javascript">
    //定义全局map变量
    var fmapID = '10347'; //mapId
    var map = new fengmap.FMMap({
        container: document.getElementById('fengMap'), //渲染dom
        //开发者申请应用名称
        appName:'蜂鸟研发SDK_2_0',
        //开发者申请应用下web服务的key
        key:'57c7f309aca507497d028a9c00207cf8'
    });

    //打开Fengmap服务器的地图数据和主题
    map.openMapById(fmapID);
    </script>
</body>

</html>

运行后效果如下：