在salesforce中使用google地图展示所有客户所在的地理位置

来源：互联网发布：网络黑彩票代理犯法吗编辑：程序博客网时间：2024/06/05 17:55

注意：使用google地图api要想查看创建效果，必须使用代理服务器，中国大陆不能直接访问。

需求：本章博客将用最简单的方式介绍如何集成google地图，实现客户地理位置的展示。

思路：

1、在Account中自定义字段经纬度等；

2、编写Controller类来获取系统中所有客户的经纬度等数据；

3、编写VF，使用google map的api来展示地图控件，并将获取的客户地理信息解析出来填充到视图中；

4、以某种方式action来加载地图（这里将在tab中实现加载地图）。

相关代码：

1、LocationRemoter控制器

global with sharing class LocationRemoter {    @RemoteAction    global static List<Account> findAll() {        return [SELECT Id, Name, Location__Latitude__s, Location__Longitude__s                FROM Account];    }}

2、编写AccountMap的visualforce

<apex:page sidebar="false" showheader="false" controller="LocationRemoter"><head><style type="text/css">    html { height: 100% }    body { height: 100%; margin: 0; padding: 0 }    #map-canvas { height: 100% }</style>//加载google地图的js<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script><script>var map;function initialize() {    var mapOptions = {//确定地图中心点，这里是中国的坐标        center: new google.maps.LatLng(29.56195, 106.551991),        zoom: 6    };    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);    loadLocation();}function loadLocation() {    Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.LocationRemoter.findAll}',        function(result, event){            if (event.status) {                for (var i=0; i<result.length; i++) {                    var id = result[i].Id;                    var name = result[i].Name;                    var lat = result[i].Location__Latitude__s;                    var lng = result[i].Location__Longitude__s;                    addMarker(id, name, lat, lng);                }            } else {                alert(event.message);            }        },        {escape: true}    );}function addMarker(id, name, lat, lng) {    var marker = new google.maps.Marker({            position: new google.maps.LatLng(lat, lng),            map: map,            title: name    });    //点击地图的marker，返回到对应客户的详细页面    google.maps.event.addListener(marker, 'click', function(event) {        window.top.location = '/' + id;    });}//为谷歌地图增加事件，当窗口加载时初始化地图，并将参数渲染到地图上google.maps.event.addDomListener(window, 'load', initialize);</script></head><body>  <div id="map-canvas"/></body></apex:page>

3、在Tab中new一个Visualforce Tabs，选择好自定义的visualforce page就OK了。

效果preview：

1 0