百度地图API接口调用的demo（浏览器端）

最新推荐文章于 2023-05-19 18:18:46 发布

AI肥肥旭

最新推荐文章于 2023-05-19 18:18:46 发布

阅读量416

点赞数

分类专栏： H5+CSS+js随笔文章标签： js html5 百度地图

本文链接：https://blog.csdn.net/CSDN_Lrcx/article/details/116237950

版权

H5+CSS+js随笔专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我们看百度官方给的demo，网址为：http://lbs.baidu.com/jsdemo.htm#aAsynLoadMap

使用的是异步加载

<!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>

从上到下看一些关键代码：
①

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

container的作用就是地图呈现在id=container的标签中，这一部分代码设置了这个标签的一些属性。由#可知次元素选择器不是class而是id，由于id唯一的属性，多次调用就会发生错误，所以我们改为：

.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(); // 启用滚轮放大缩小
}

var map = new BMapGL.Map(‘container’）这一行代码的container被我们改成了class属性，这里可以这样操作：

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); // 创建中心城市点坐标

也可以不创建中心城市点坐标，直接使用：

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

AI肥肥旭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
百度地图API接口调用的demo（浏览器端）

我们看百度官方给的demo，网址为：http://lbs.baidu.com/jsdemo.htm#aAsynLoadMap使用的是异步加载<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <title>异步加载地图</title> <meta http-equiv="Content-Type" content="text
复制链接

扫一扫