Fengmap JavaScript SDK

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

初始化Fengmap SDK

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

<script type="text/javascript" src="lib/fengmap.min.js">  </script>
页面元素

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

<div id="map-container"></div>
显示地图

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

var fmapID = '10347'; //mapId
var map = new fengmap.FMMap({
    container: document.getElementById('map-container'), //渲染dom
    appName:'fmdemo',           //开发者应用名称
    key:'ac9a8a62f93648842203c09b24241425',  //开发者申请应用下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;
    }
    #map-container {
        position: absolute;
        width:100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <div id="map-container"></div>

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

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

</html>

运行后效果如下: