跳到主要内容
版本：9.14.0-beta

展示地图

我们从展示一个地图开始。以下是示例效果和实现步骤。

show

1. 编写HTML页面基础代码​

在这一步我们完成头部文件和地图容器样式的编写，让地图容器充满网页。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Display a map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
</html>

2. 引入SDK文件​

<script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.14.0-beta/mapmost-webgl-min.js"></script>

3. 初始化地图​

先创建一个地图容器，一定要设置容器的id，再创建地图实例并设置地图中心点和缩放级别。

<body>
<!-- 创建一个 id 为 "map" 的地图容器 -->
<div id="map"></div>  
<script>
    let map = new mapmost.Map({
        container: 'map', // 地图容器 id
        style: "https://www.mapmost.com/cdn/styles/sample_data.json", // 可替换为您的地图样式文件 URL
        center: [120.71923008473078, 31.29446443371741], // 设置地图初始中心点坐标
        zoom: 14.7, // 设置地图初始级别
        userId: '***', // 替换为您的授权码
    });
</script>
</body>

这样，我们就完成了一个完整的地图展示的例子。