如何在Apple MapKit JS的链接元素前添加非可点击文本？

要实现非可点击前置文本（如“主站”）+ 可点击链接的效果，核心是把前置文本和链接放在同一个容器内，分别作为独立节点存在——前置文本用普通文本节点，链接用<a>元素，这样只有链接部分会响应点击。

修改你的代码如下：

// Landmark annotation callout delegate
var calloutDelegate = {
    // Return a div element and populate it with information from the
    // annotation, including a link to a review site.
    calloutContentForAnnotation: function(annotation) {
        var element = document.createElement("div");
        element.className = "review-callout-content";

        // 处理主站链接：添加非可点击前置文本
        var websiteContainer = element.appendChild(document.createElement("p"));
        // 插入非可点击的前置文本节点
        websiteContainer.appendChild(document.createTextNode("主站："));
        // 创建链接元素
        var link = document.createElement("a");
        link.href = annotation.landmark.url;
        link.textContent = "website";
        // 将链接加入容器
        websiteContainer.appendChild(link);
        
        var phone = element.appendChild(document.createElement("p"));
        phone.textContent = `Phone: ${annotation.landmark.phone}`;

        // 处理联系页链接：添加非可点击前置文本
        var contactContainer = element.appendChild(document.createElement("p"));
        contactContainer.appendChild(document.createTextNode("联系页："));
        var contact = document.createElement("a");
        contact.href = annotation.landmark.url2;
        contact.textContent = "contact";
        contactContainer.appendChild(contact);

        // Add more content.
        element.style.width = "240px";
        element.style.height = "100px";
        return element;
    }
};

说明 #

• 用<p>作为容器，先通过document.createTextNode创建纯文本的前置内容，再把链接元素插入到同一个容器中，这样前置文本不会被绑定点击事件。
• 如果需要调整样式，可以给容器或前置文本添加类名，通过CSS控制排版。

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