vue项目中引入百度地图api，并根据经纬度坐标添加覆盖物

最新推荐文章于 2025-08-09 14:49:55 发布

原创

最新推荐文章于 2025-08-09 14:49:55 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #百度 #api #ts

先上效果图：

第一步：在 public的index.html中引入百度地图api，ak需要在百度开放平台申请

第二步：定义一个构造函数用于批量创建地图遮盖物

// ----------------------------  1.定义自定义覆盖物的构造函数
function SquareOverlay(this: any, center: any, data: any) {
  this._center = center;
  this._data = data;
}
SquareOverlay.prototype = new window.BMapGL.Overlay();

SquareOverlay.prototype.initialize = function (map: Window["BMapGL"]): HTMLElement {
  // 保存map对象实例
  this._map = map;
  // 创建div元素，作为自定义覆盖物的容器
  const circleView = document.createElement("circleView");
  circleView.style.position = "absolute";
  circleView.className = "marker-wrapper";
  circleView.innerHTML = `
  <div class="info">
  <div >车牌号：</div>
  <div