Mapbox Search JS 1.0.0-beta.13：如何修改minimap编辑按钮文本？

由于你使用的Mapbox Search JS 1.0.0-beta.13版本没有提供官方API直接修改「Adjust pin」「Save」「Cancel」按钮的文本，你可以通过DOM操作结合Vue i18n来实现需求，具体步骤如下：

1. 编写按钮文本更新函数 #

创建通用函数用于查询按钮DOM元素并替换为多语言文本：

import { MapboxAddressMinimap } from "@mapbox/search-js-web";
import { useI18n } from "vue-i18n";
import { watch, onMounted } from "vue";

const { t, locale } = useI18n();
let minimap = null;

// 更新按钮文本的核心函数
function updateMinimapButtonTexts() {
  // 用setTimeout确保minimap DOM已渲染完成
  setTimeout(() => {
    const adjustPinBtn = document.querySelector('.mapbox-address-minimap__adjust-pin-btn');
    const saveBtn = document.querySelector('.mapbox-address-minimap__save-btn');
    const cancelBtn = document.querySelector('.mapbox-address-minimap__cancel-btn');
    
    adjustPinBtn && (adjustPinBtn.textContent = t('minimap_adjust_pin'));
    saveBtn && (saveBtn.textContent = t('minimap_save'));
    cancelBtn && (cancelBtn.textContent = t('minimap_cancel'));
  }, 100);
}

2. 初始化Minimap并绑定文本更新 #

在组件挂载时初始化minimap，并调用文本更新函数：

onMounted(() => {
  const minimapContainer = document.getElementById("minimap-container");
  minimap = new MapboxAddressMinimap();
  minimap.footer = t("minimap_footer");
  minimapContainer.appendChild(minimap);
  
  // 初始化后立即更新按钮文本
  updateMinimapButtonTexts();
});

3. 监听语言切换，实时更新文本 #

通过Vue i18n的locale监听语言变化，同步更新按钮和footer文本：

watch(locale, () => {
  minimap.footer = t("minimap_footer");
  updateMinimapButtonTexts();
});

4. 更可靠的DOM监听方案（可选） #

如果担心setTimeout的延迟问题，可以使用MutationObserver监听minimap容器的DOM变化，确保按钮出现时立即更新：

function setupMinimapObserver() {
  const minimapContainer = document.getElementById("minimap-container");
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length) {
        updateMinimapButtonTexts();
        // 检测到所有按钮后停止监听，避免重复触发
        const allButtonsExist = [
          '.mapbox-address-minimap__adjust-pin-btn',
          '.mapbox-address-minimap__save-btn',
          '.mapbox-address-minimap__cancel-btn'
        ].every(selector => document.querySelector(selector));
        
        if (allButtonsExist) observer.disconnect();
      }
    });
  });
  
  observer.observe(minimapContainer, { childList: true, subtree: true });
}

// 在onMounted中调用
onMounted(() => {
  // ... 其他初始化代码
  setupMinimapObserver();
});

注意事项 #

• 该方案依赖Mapbox生成的DOM类名（如mapbox-address-minimap__adjust-pin-btn），如果后续Mapbox更新组件结构，需要同步调整选择器。
• 确保你的Vue i18n配置中包含对应键值（如minimap_adjust_pin、minimap_save、minimap_cancel）。

内容的提问来源于stack exchange，提问作者Trojanku