百度地图使用

百度地图使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：这是百度地图的使用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用百度地图的步骤

二、使用步骤

1.引入百度地图

代码如下（示例）：

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

2.初始化地图

代码如下（示例）：

var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别

三. 绘制点、线、面

点

var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

        map.addEventListener("click", e => {
            var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
            var m = new BMapGL.Marker(p);
            last = m
            map.addOverlay(m);                     // 将标注添加到地图中
        })

线、面

        // 添加点
        var marker = new BMapGL.Marker(point);        // 创建标注   
        map.addOverlay(marker);     
                        // 将标注添加到地图中
        // 记录点的数组
        var lineArr = [];
        // 记录上一个个
        var last = null;
        // 添加事件      
        map.addEventListener("click",e=>{  
            //  有上一个就移除上一个
            last?map.removeOverlay(last):'';       
            // 获取单击点的位置(经度，纬度)
            var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat); 
            // 添加到数组组件
            lineArr.push(p);
            // 创建一个标记
            var m = new BMapGL.Marker(p); 
            // 重新定义上一个
            last = m;
            // 显示标记
            map.addOverlay(m);     
 
        })
        // 双击事件
        map.addEventListener("dblclick",()=>{
            // 移除最后点
            map.removeOverlay(last)
            // 多边线 strokeColor颜色  strokeWeight线粗细 strokeOpacity 线的透明度        
            // var polyline = new BMapGL.Polyline(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
            // 显示线
            // map.addOverlay(polyline);
            var polygon = new BMapGL.Polygon(lineArr,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor:"red"})
            map.addOverlay(polygon);
            // 清空数组
            lineArr=[];

将 lineArr 按顺序首尾相连，最终围成一个封闭图形的效果

画圈

地图中心画圆

        var circle = new BMapGL.Circle(point, 1000, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 }); //创建圆
        map.addOverlay(circle);

文本标注

var content = "<strong style='color:red'>中国</strong>牛";
var label = new BMapGL.Label(content, {       // 创建文本标注
    position: point,                          // 设置标注的地理位置
    offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量
})
map.addOverlay(label);

信息窗口

     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.在 pulic 下的 index.html 中引入

  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=密钥">
    </script>

在需要使用的文件里面使用

<template>
  <div>
    <div id="container" ref="dom"></div>
  </div>
</template>
<style>
#container {
  width: 800px;
  height: 600px;
}
</style>
<script setup>
import { ref, onMounted } from "vue";
const dom = ref();
let map;
onMounted(() => {
  map = new BMapGL.Map(dom.value);
  // 创建地图实例
  var point = new BMapGL.Point(113.6648, 34.7835);
  // 创建点坐标
  map.centerAndZoom(point, 15);
  // 初始化地图，设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true);
  map.setMapType(BMAP_EARTH_MAP);
});
</script>

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。