基础地图-应用开发-JavaScript API-地图服务

1 创建地图

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

1. 创建一个HTML文件，并在文件头声明以下内容，以支持大多数浏览器。

收起
自动换行
深色代码主题
复制
<!DOCTYPE html>

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

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

3. 引入华为地图API文件，其中key要经过URL转码。

收起
自动换行
深色代码主题
复制
<script src="https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key=API KEY"></script>

4. 在body内部创建地图容器元素。

收起
自动换行
深色代码主题
复制
<body> 
<div id="map"></div> 
</body>

创建初始化地图的脚本，如下创建了以巴黎为中心，缩放系数为8的地图。

收起
自动换行
深色代码主题
复制
<script> 
    function initMap() { 
        var mapOptions = {}; 
        mapOptions.center = {lat: 48.856613, lng: 2.352222}; 
        mapOptions.zoom = 8; 
        mapOptions.language='ENG'; 
        var map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions); 
    } 
</script>

5. 预览如下:

图1：创建地图

2 地图属性

地图支持属性自定义修改，如地图的中心点、缩放系数以及地图朝向等。以下代码示例为修改地图中心点：

收起
自动换行
深色代码主题
复制
<tr> 
    <td>Latitude:</td> 
    <td><input id="latInput" type="text" value="48.95"/></td> 
</tr> 
<tr> 
    <td>Longitude:</td> 
    <td><input id="lngInput" type="text" value="2.35"/></td> 
</tr>

收起
自动换行
深色代码主题
复制
var lat = Number(document.getElementById("latInput").value); 
var lng = Number(document.getElementById("lngInput").value); 
map.setCenter({lat: lat, lng: lng});

地图的以下属性支持自定义：

属性	含义
setCenter(latlng)	设置地图中心点坐标。
setHeading(heading)	设置地图朝向，即地图与正北方向的夹角。
setOpacity(opacity)	设置地图透明度。
setTitle(title)	设置地图所在容器的提示信息。
setZoom(zoom)	设置地图缩放级别。
zoomOut()	地图缩小一个级别。
zoomIn()	地图放大一个级别。