El efecto de este artículo
1. Aplicación de cuenta de desarrollador de mapas de Baidu
Sitio web oficial: Baidu Map Open Platform | Baidu Map API SDK | Map Development (baidu.com)
Si no, regístrelo.En términos generales, tiene una cuenta de Baidu si ha utilizado Baidu Cloud.
Haga clic en [Consola] - [Soy un entusiasta/estudiante personal]
Mejore la información personal: autenticación de nombre real
Regrese a la página de inicio nuevamente, haga clic en [Consola] en la barra de menú
Ver esta interfaz significa que el registro se ha realizado correctamente.
2. Crea una aplicación
1. Haga clic en [Administración de aplicaciones]--[Mis aplicaciones]--[Crear aplicación] (siga los pasos en las palabras azul/verde de la imagen)
2. Haga clic en [Enviar]
3. Creado con éxito. (El código AK aquí es muy importante y se usará en desarrollos posteriores).
3. Encuentra la API de mapas de Baidu
1. Haga clic en [Documento de desarrollo]--[API de JavaScript] en la barra de menú de la página de inicio
2. Haga clic en 【HolaMundo】
3. Busque [Consulte el archivo API de Baidu Maps] y copie la API
4. Cambie [su clave] a (el último paso del paso 2) el 'código AK' después de crear con éxito la aplicación
4. Pasos de desarrollo
código completo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 2.设置尺寸 */
.map {
width: 1000px; /*任意大小*/
height: 600px;
border: 1px solid red;
}
</style>
<!-- 3.引入百度地图api 最好在head引入 -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=此处输入你自己的百度地图AK码">
</script>
</head>
<body>
<!-- 1.创建容器 => 容器必须得有尺寸 没有尺寸无法显示地图效果 -->
<div class="map"></div>
</body>
<script>
// <!-- 4.创建地图实例 -->
// 1)获得节点
let mapSelector = document.querySelector(".map");
// <!-- 2)借用百度地图api创建一个地图实例；参数是'节点'或者'id值' -->
let map = new BMapGL.Map(mapSelector);
// <!-- 3)借用百度地图api创建一个定位点 (以成都大鼎世纪广场定位点经纬度为例) -->
let point = new BMapGL.Point(104.07489829924052, 30.60746989778522);
// <!-- 4)初始化地图；参数1是定位点； 参数2是地图级别； 1-19：1范围最大 细节最弱， 19范围最小 细节最强 -->
map.centerAndZoom(point,19)
</script>
</html>
efecto final
