Démo de l'appel d'interface API Baidu Map (côté navigateur)

Jetons un coup d'œil à la démo fournie par le site officiel de Baidu : http://lbs.baidu.com/jsdemo.htm#aAsynLoadMap

Utiliser le chargement asynchrone

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>异步加载地图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <style>
    body,
    html,
    #container {
     
                   
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
</html>
<script>
function loadJScript() {
     
     
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥&callback=init';
    document.body.appendChild(script);
}
function init() {
     
     
    var map = new BMapGL.Map('container'); // 创建Map实例
    var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
    map.centerAndZoom(point, 10);
    map.enableScrollWheelZoom(); // 启用滚轮放大缩小
}
window.onload = loadJScript; // 异步加载地图
</script>

Regardez quelques codes clés de haut en bas :
①

#container {                 
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }

La fonction du conteneur est que la carte est présentée dans la balise avec id=container. Cette partie du code définit certains attributs de cette balise. De # nous pouvons voir que le sélecteur d'élément secondaire n'est pas une classe mais un identifiant. Puisque l'identifiant est le seul attribut, une erreur se produira s'il est appelé plusieurs fois, nous le modifions donc comme :

.container {              
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }

②

function init() {
    var map = new BMapGL.Map('container'); // 创建Map实例
    var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
    map.centerAndZoom(point, 10);
    map.enableScrollWheelZoom(); // 启用滚轮放大缩小
}

Le conteneur de cette ligne de code var map = new BMapGL.Map('container') a été remplacé par un attribut de classe. Ici, vous pouvez faire ceci :

var li=document.createElement('li')   //创建一个li标签，标签随便创建，百度的demo使用的是div
li.className='container';             //设置其class属性为container，属性名也可以随便写，但要和第一步的保持一致。
var map = new BMapGL.Map(li);   //这里就改成我们创建的标签

var point = new BMapGL.Point(116.404, 39.915); // 创建中心城市点坐标

Vous pouvez également l'utiliser directement sans créer les coordonnées du point central de la ville :

map.centerAndZoom('南京市', 10);   //直接将原来的point改为城市名称，默认为北京市，要写上“市”字，不然可能定位不到。10这个数代表的是地图的精细程度，越大越精细，越小可能输入的是南京出来的是整个中国的地图。

Démo de l'appel d'interface API Baidu Map (côté navigateur)

Guess you like