您的位置：首页 > 编程语言 > Go语言

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

2017-04-17 12:32 387 查看

注意：使用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),

4000
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：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航