Salesforce学习 GoogleMaps（一）【VisualforcePage】

原创

repick

修改于 2021-03-19 02:24:11

1.6K00

代码可运行

文章被收录于专栏：SalesforceSalesforce

运行总次数：0

代码可运行

今天简单做一下如何利用salesforce使用【GoogleMaps】，首先登陆到【Google Cloud Platform】,连接如下：https://console.cloud.google.com/

登陆成功之后，首先创建项目。

1.创建项目

点击【选择项目】→【新建项目】→【创建】

2.API有效化

点击【API和服务】→【启用API和服务】→【Maps JavaScript API】→【启用】

3.API密钥发行

点击【凭据】→

创建凭据→API密钥

4.下面开始salesforce这边的设置

【data integration rules】→【Geocodes for Account Billing Address】→【Activate】

5.实装

注意：API_KEY的部分需要替换成刚才做成的Key

GoogleMapExampleForVF.page

<apex:page controller="GoogleMapExampleForVFController" lightningStylesheets="true">
    <script type="text/javascript" async="true" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
    <script>
    var currentInfoWindow = null;

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true
        });
        var accounts =  JSON.parse('{!JSENCODE(jsonAccounts)}');
        for(var i in accounts){
            createMarker(map, accounts[i]);
        }
    }

    function createMarker(map, acc){
            var latlng = new google.maps.LatLng(acc.BillingLatitude, acc.BillingLongitude);

            map.setCenter(latlng);

            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: 'http://maps.google.com/mapfiles/ms/micons/red-pushpin.png',
                title: acc.Name
            });

            var infowindow = new google.maps.InfoWindow({
                content: acc.Name,
                size: new google.maps.Size(200,30)
            });

            google.maps.event.addListener(marker, 'click', function() {
                if (currentInfoWindow) {
                    currentInfoWindow.close();
                }
                infowindow.open(map, marker);
                currentInfoWindow = infowindow;
                map.panTo(latlng);
                selectMarker(acc.Id);
            });
    }
    </script>
    <h1>Select Account</h1>
        <apex:form >
        <apex:actionFunction name="selectMarker" action="{!selectMarker}" rerender="accountName">
            <apex:param name="id" value="" assignTo="{!selectedAccoutId}"/>
        </apex:actionFunction>

        <apex:outputField id="accountName" label="取引先：" value="{!selectedAccout.name}"/>
        <div id="map" style="height:500px;" />
    </apex:form>
</apex:page>

GoogleMapExampleForVFController.cls

public with sharing class GoogleMapExampleForVFController {
    private Map<Id, Account> accounts {get;set;}
    public Id selectedAccoutId {get;set;}
    public Account selectedAccout {get;set;}
    public GoogleMapExampleForVFController() {
        this.accounts = new Map<Id, Account>([SELECT Id, Name, BillingLatitude, BillingLongitude FROM Account]);
    }
    public String getJsonAccounts(){
        return JSON.serialize(this.accounts.values());
    }
    public void selectMarker(){
        if(this.accounts.containsKey(this.selectedAccoutId)){
            this.selectedAccout = this.accounts.get(this.selectedAccoutId);
        }
    }
}