<apex: mapMarker> 组件在 Visualforce 页面中

17 Mar 2025 | 阅读 2 分钟

<apex: mapMarker> 是 Visualforce 页面中的另一个重要组件，用于定义要显示在 <apex: map> 组件上某个位置的标记。我们始终在 <apex: map> 组件内部使用 <apex: mapMarker> 组件。我们可以在单个 <apex: map> 组件内使用最多 100 个 <apex: mapMarker> 组件。

<apex: mapMarker> 组件具有以下属性

1. 图标

"icon" 是一个字符串类型的属性，用于指定需要为此标记显示的图标的 URL。

语法

2. id

"id" 是一个字符串类型的属性，用于指定需要为此标记显示的图标的 URL。

语法

<apex: mapMarker icon="iconURL"></apex: mapMarker></p>
<p><strong>3. rendered</strong></p>
<p>The <strong>"rendered"</strong> is a Boolean-type attribute used to specify whether this component is rendered on this page.</p>
<p><strong>Syntax:</strong></p>
<div class="codeblock"><textarea name="code" class="xml">
<apex: mapMarker rendered="false"></apex: mapMarker>

4. 标题

"title" 是一个字符串类型的属性，用于指定当用户将光标移到标记上时需要显示的文本。

语法

5. 位置

"position" 是一个对象类型的属性，用于指定标记的位置。我们可以使用以下方式之一来指定位置

1. 字符串表示一个 JSON 对象，其中包含指定位置坐标的 latitude 和 longitude 属性。

语法

<apex: mapMarker position=" 1 Market Street, San Francisco, CA"></apex: mapMarker>

让我们举个例子来理解我们如何在 Visualforce 页面上使用这个组件

ApexMapMarkerExample.vfp

<!-- apex page with Account standard controller-->
<apex:page standardController="Account">
    
    <!-- apex pageBlock and pageBlockSection to display Account and its Contact Information -->
    <apex:pageBlock >
        <apex:pageBlockSection title="Contacts For {! Account.Name }">
            <!-- use apex dataList to represent contact information-->
            <apex:dataList value="{! Account.Contacts }" var="con">
                <apex:outputText value="{! con.Name }" />
            </apex:dataList> 
        </apex:pageBlockSection>
    </apex:pageBlock>
    <!-- use apex map to display Account Shipping address-->
    <apex:map width="500px" height="400px" mapType="roadmap" center="{!Account.ShippingStreet},{!Account.ShippingCity},{!Account.ShippingState}">
        <!-- use apex repeat for iterating Account's Contacts-->
        <apex:repeat value="{! Account.Contacts }" var="contact">
            <apex:mapMarker title="{! contact.Name }" position="{!contact.OtherStreet},{!contact.OtherCity},{!contact.OtherState}">
                <apex:mapInfoWindow>
                    <apex:outputPanel layout="block" style="font-weight: bold;">
                        <apex:outputText>{! contact.Name }</apex:outputText>
                    </apex:outputPanel>
                    <apex:outputPanel layout="block">
                        <apex:outputText>
                            {!contact.OtherStreet},{!contact.OtherCity},{!contact.OtherState}
                        </apex:outputText>
                    </apex:outputPanel>     		
                </apex:mapInfoWindow>
            </apex:mapMarker>
        </apex:repeat>
    </apex:map>
</apex:page>

输出