百度地图的使用方法，如何在Vue项目中使用百度地图

最新推荐文章于 2024-04-25 20:43:12 发布

·歪腻·

最新推荐文章于 2024-04-25 20:43:12 发布

阅读量5k

点赞数 3

文章标签： vue.js 百度 javascript

本文链接：https://blog.csdn.net/wzy199982/article/details/127624358

版权

关于百度地图的解释

百度地图又称LBS：LocationBussinessServer，是基于定义位置的商业服务，现在常用的地图有百度地图和高德地图居多

官网入口

https://lbsyun.baidu.com/apiconsole/center#/home

使用百度地图的步骤

第一步：登陆注册，获取密钥AK（需要自行注册百度地图，实名认证后创建获得）
第二步：引入百度地图js

<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak='自己的密钥'"></script>

第三步：创建地图的容器

<div id="container"></div>

第四步：初始化地图

var map = new BMapGL.Map("container");

第五步：创建一个地图中心点

var point = new BMapGL.Point(116.404, 39.915);

第六步：设置中心点和滚轮缩放

map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);

全部代码

<!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>
        #container {
   
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>
<!-- 导入js -->
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=aEGXvr6KLo5v40cLlaCrPvZ0AKEOd18O"></script>
<script>
    //初始化地图
    var map = new BMapGL.Map("container");
    //准备一个中心点（经纬度）
    var point = new BMapGL.Point(116.404, 39.915);
    //设置中心点和缩放级别
    map.centerAndZoom(point, 15);
    //鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
</script>

</html>

运行效果图：
在这里插入图片描述

丰富百度地图上的内容

添加地图控制器

var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
map.addControl(zoomCtrl);
var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
map.addControl(cityCtrl);

地图上绘制内容

点

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map </title>
    <style type="text/css">
        html {
   
            height: 100%
        }

        body {
   
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
   
            height: 100%
        }
    </style>
</head>

<body>
    <div id="container">

    </div>
</body>
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=aEGXvr6KLo5v40cLlaCrPvZ0AKEOd18O"></script>
<script