创建地图-基础地图-JavaScript-地图服务

本章节将向您介绍通过华为地图API for JavaScript创建一个简单的网页地图。

JavaScript提供2种认证方式初始化地图，推荐使用AT认证：

AT认证，AT生成方式参见基于OAuth 2.0获取应用级AT。
API KEY认证，API KEY的获取请参见获取API密钥。

AT认证

说明

AT有效期是1个小时，请及时更新。
如果同时设置了API KEY和AT，优先使用AT认证。
使用AT认证时推荐新申请AT接入MapKit。
如果请求携带traceId，可用于问题跟踪定位。

创建一个HTML文件，并在文件头声明以下内容，以支持大多数浏览器。
收起
自动换行
深色代码主题
复制
```
<!DOCTYPE html>
```

在head标签对里添加style标签对，来设置容器样式大小。

收起
自动换行
深色代码主题
复制
<head>
    <meta charset="UTF-8">
    <style>
        #map {
            height: 800px
;
            width: 100%
;
            margin: 0 auto
;
        }
    </style>
</head>

引入华为地图API文件。
收起
自动换行
深色代码主题
复制
```
<script src="https://mapapi.cloud.huawei.com/mapjs/v1/mapkit.js"></script>
```
如果需要设置路由地，可通过accessRegion参数设置。
收起
自动换行
深色代码主题
复制
```
<script src="https://mapapi.cloud.huawei.com/mapjs/v1/mapkit.js?accessRegion=CN"></script>
```
在body内部创建地图容器元素。
收起
自动换行
深色代码主题
复制
```
<body>
<div id="map"></div>
</body>
```

创建初始化地图脚本，以巴黎为中心的地图。调用HWMapJsSDK.HWMap(div, mapOptions)，传入地图初始化参数MapOptions设置地图初始状态，设置AT。

收起
自动换行
深色代码主题
复制
<script>
    function initMap() {
        var mapOptions = {};
        // 设置地图中心点坐标
        mapOptions.center = {lat: 48.856613
, lng: 2.352222
};
        // 设置地图初始化缩放级别
        mapOptions.zoom = 8
;
        // 设置地图语言
        mapOptions.language='ENG
';
        // 设置地图加载时使用的瓦片类型，支持vector（矢量）或raster（栅格）
        mapOptions.sourceType = 'raster
';
        // 设置AT
        mapOptions.authOptions = {accessToken: token}
        // 创建地图对象
        var map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
    }
</script>

效果展示：

点击放大

API KEY认证

说明

如果请求携带traceId，可用于问题跟踪定位。

创建一个HTML文件，并在文件头声明以下内容，以支持大多数浏览器。
收起
自动换行
深色代码主题
复制
```
<!DOCTYPE html>
```

在head标签对里添加style标签对，来设置容器样式大小。

收起
自动换行
深色代码主题
复制
<head>
    <meta charset="UTF-8">
    <style>
        #map {
            height: 800px
;
            width: 100%
;
            margin: 0 auto
;
        }
    </style>
</head>

引入华为地图API文件，其中key要经过URL转码。API KEY的获取请参见获取API密钥。
收起
自动换行
深色代码主题
复制
```
<script src="https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key=API KEY"></script>
```
在body内部创建地图容器元素。
收起
自动换行
深色代码主题
复制
```
<body>
<div id="map"></div>
</body>
```

创建初始化地图脚本，以巴黎为中心的地图。调用HWMapJsSDK.HWMap(div, mapOptions)，传入地图初始化参数MapOptions设置地图初始状态。

收起
自动换行
深色代码主题
复制
<script>
    function initMap() {
        var mapOptions = {};
        // 设置地图中心点坐标
        mapOptions.center = {lat: 48.856613
, lng: 2.352222
};
        // 设置地图初始化缩放级别
        mapOptions.zoom = 8
;
        // 设置地图语言
        mapOptions.language='ENG
';
        // 设置地图加载时使用的瓦片类型，支持vector（矢量）或raster（栅格）
        mapOptions.sourceType = 'raster
';
        // 创建地图对象
        var map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
    }
</script>

效果展示：

点击放大