百度地图——多点标记及路线

原创

已于 2022-05-30 17:38:01 修改 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2022-05-26 10:59:45 首次发布

本文介绍如何使用百度地图API创建地图实例，并实现多点标记、文本标注与步行路线显示等功能。通过具体代码示例展示了如何配置地图参数、添加标记点及实现路线规划。

文档

申请秘钥，index.html中引入js文件

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

实现多点标记及对应文本标记，显示步行路线

在这里插入图片描述 +

map组件

<template>
  <div class="w100 h100" ref="mapBox"></div>
</template>

<script>
export default {
   
   
  data() {
   
   
    return {
   
   
      map: "",
    };
  },
  props: {
   
   
    markerArr: {
   
   
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
   
   
        return [
          {
   
   
            lable: