世界那么大，我想去看看——【百度地图的使用】

在日常生活中，地图的应用很广泛，作为前端小白，我们应该如何去使用呢？接下来就跟着小蜗牛一起去学习吧。

我们在这里以百度地图为例：

一、准备工作

1：首先打开百度地图开放平台网站百度地图开放平台 | 百度地图API SDK | 地图开发 (baidu.com)https://lbsyun.baidu.com/?qq-pf-to=pcqq.group2：注册一个个人开发者账号。

创建好后点击控制台，找到应用管理--我的应用，新建一个应用

新建一个应用

创建一个名为mymap的应用

至此我们便完成了创建工作。

二、项目使用

简单地图的实现

1、代码引入

2、创建一个盛放地图的容器（自行设置宽高）

3、实例化地图（创建坐标并设置中心点）

4、控件（可以给地图添加比例尺控件、缩放空间、城市列表控件以及开启滚轮缩放等）

5、效果图

点线面的实现

1、点

向地图中心点添加了一个标注，并使用默认的标注样式

单击在地图中添加点的效果

2、线

    <script>
        var lineArr = [];    //用盛放点的坐标
        var map = new BMapGL.Map("container");          // 创建地图实例 
        var point = new BMapGL.Point(113.6648, 34.7835);  // 创建点坐标 
        map.centerAndZoom(point, 17);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        //添加点
        var marker = new BMapGL.Marker(point);        // 创建标注   
        map.addOverlay(marker);                     // 将标注添加到地图中
        //添加事件 单击事件
        map.addEventListener("click", e => {
            // console.log(e);
            var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat); //点击时的坐标点
            //创建一个标记
            var m = new BMapGL.Marker(p);   // 创建标注   
            //添加到数组组件
            lineArr.push(p);        //点击的坐标放到lineArr里面
            map.addOverlay(m);     // 将标注添加到地图中
        })
        //双击事件
        map.addEventListener("dblclick", () => {
            //多边线 strokeColor颜色 strokeWeight线粗细 strokeOpacity线透明度
            var polyline = new BMapGL.Polyline(lineArr, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 })
            //显示线
            map.addOverlay(polyline);
            lineArr = [];    //创建线后将lineArr清空防止想创建多个线出现全部线连在一起的bug
        })
</script>

3、面

 <script>
        var lineArr = [];
        var last = null;
        var map = new BMapGL.Map("container");          // 创建地图实例 
        var point = new BMapGL.Point(113.6648, 34.7835);  // 创建点坐标 
        map.centerAndZoom(point, 17);                 // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        //添加点
        var marker = new BMapGL.Marker(point);        // 创建标注   
        map.addOverlay(marker);                     // 将标注添加到地图中
        //添加事件 单击事件
        map.addEventListener("click", e => {
            //有上一个点移除
            last ? map.removeOverlay(last) : '';
            // console.log(e);
            var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat); //点击时的坐标点
            //创建一个标记
            var m = new BMapGL.Marker(p);   // 创建标注   
            //记录上一个点
            last = m;
            //添加到数组组件
            lineArr.push(p);        //
            map.addOverlay(m);     // 将标注添加到地图中
        })
        //双击事件
        map.addEventListener("dblclick", () => {
            // 移除最后一个点
            map.removeOverlay(last);  
            // 面
            var polygon = new BMapGL.Polygon(lineArr, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, fillColor: "red" })
            //显示线
            map.addOverlay(polygon);
            lineArr = [];
        })
</script>

信息窗口

        var opts = {
            width: 250,     // 信息窗口宽度
            height: 200,    // 信息窗口高度
            title: "Hello"  // 信息窗口标题
        }
        // 内容
        var content = `<p>终身学习爱好者</p><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="120">`
        var infoWindow = new BMapGL.InfoWindow(content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
        // 通过标记添加单击事件，打开信息窗口
        marker.addEventListener('click', () => {
            map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口

效果如下：

三、在vue项目中使用百度地图

1、在项目public文件下方的index.html中导入

2、创建容器

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="container" ref="dom"></div>
  </div>
</template>

3、实例化地图

<script setup>
import { ref, onMounted } from 'vue'
const dom = ref();
let map;
onMounted(() => {
  var point = new window.BMapGL.Point(116.404, 39.915);
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom(true);

  map.setHeading(64.5);   //设置地图旋转角度
  map.setTilt(73);       //设置地图的倾斜角度

  // 禁止地图旋转和倾斜可以通过配置项进行设置
  map = new window.BMapGL.Map("allmap", {
    enableRotate: false,
    enableTilt: false
  });
})
</script>