0
点赞
收藏
分享

微信扫一扫

Hive原理剖析

自由情感小屋 2023-08-31 阅读 43
百度

话不多说直接开干

1.第一种方式

百度地图地址 打开
https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

html结构

在这里插入图片描述

第二种

我们准备一个vue页面
然后html结构的元素

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

然后我们的js的逻辑部分

<script setup>

// 初始化script
function loadJScript() {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://api.map.baidu.com/getscript?v=3.0&ak=你的ak&services=&t=20230808155339';
  script.onload = () => {
    init()
  }
  document.body.appendChild(script);
}
// 初始化地图
function init(position = new BMap.Point(116.403963,39.915119)) {
  const map = new window.BMap.Map('container'); // 创建Map实例
  const point = position; // 创建点坐标
  const points = [
    new BMap.Point(116.402867,39.915541),
    new BMap.Point(116.404807,39.915562),
    new BMap.Point(116.404803,39.914864),
    new BMap.Point(116.403882,39.91457),
    new BMap.Point(116.402768,39.914701),
  ];
  const polygonOptions = {
    strokeColor: "red", // 边界线颜色
    strokeWeight: 1,    // 边界线宽度
    strokeOpacity: 0.8, // 边界线透明度
    fillColor: "blue",  // 填充颜色
    fillOpacity: 0.4    // 填充透明度
  };

  const poly = new BMap.Polygon(points, polygonOptions)
  // 折线添加到地图中
  map.addOverlay(poly)
  map.centerAndZoom(point, 20);
  var marker = new BMap.Marker(point);
  map.addOverlay(marker);

  map.enableScrollWheelZoom(); // 启用滚轮放大缩小

}


window.onload = loadJScript(); // 异步加载地图


</script>

后言

举报

相关推荐

0 条评论