初识SFDC创建一个google map（添加了marker小图标）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初识SFDC创建一个google map（添加了marker小图标）相关的知识，希望对你有一定的参考价值。
1 <apex:page > 2 <head> 3 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 4 <script type="text/javascript" src="http://maps.google.cn/maps/api/js?sensor=false"></script> 5 <script type="text/javascript"> 6 var gGreenIcon = new google.maps.MarkerImage( 7 8 "http://img.zcool.cn/community/[email protected]_32h_1c_1e_2o.png", 9 new google.maps.Size(32, 32), 10 new google.maps.Point(0, 0), 11 new google.maps.Point(16, 16) 12 13 ); 14 15 function myLoad() { 16 17 var lat = 23.14746; 18 var lng = 113.34175376; 19 20 var myLatLng = new google.maps.LatLng(lat, lng); 21 var myOptions = { 22 23 zoom: 15, 24 25 center: myLatLng, 26 27 mapTypeId: google.maps.MapTypeId.ROADMAP 28 }; 29 var map = new google.maps.Map(document.getElementById("map"), myOptions); 30 31 var marker = new google.maps.Marker({ 32 position: myLatLng, 33 icon: gGreenIcon, 34 map: map, 35 title: "Hello World!" 36 }); 37 //marker.setMap(map); 38 } 39 window.onload = myLoad; 40 </script> 41 </head> 42 <body> 43 <style> 44 #map { 45 width: 500px; 46 height: 400px; 47 float: left; 48 } 49 </style> 50 <div id="map"></div> 51 </body> 52 </apex:page>
直接上代码，重要的事情还是要强调一下，必须是IE浏览器才能打开。
上一篇文章上的注释就不过多的浪费细说了，重点说一下marker
function myLoad() 上面的这一段其实就是自定义一个小图标。里面的那些属性请自行体会（其实我也不知道）。第一个是你要应用的这个图标的路径。size是大小。point是和坐标位置的相对位移。（至于为什么有两个point……）如果有不对的地方一定一定一定要指正出来啊，共同学习。
地图的创建和上一篇一样，设置经纬度，基本信息，调用map方法，一般情况下都把地图放在<div>中。
使用Marker方法创建marker
icon: gGreenIcon 是指你调用的那个var，如果不写也是可以得，默认是用自带的一个红色的小图标。
map: map 是把他添加到那个地图上。如果不写这个 用//marker.setMap(map);（被注释掉的这句）是实现同样功能的。
title: "Hello World!" 是指鼠标放在上面显示的东西，默认隐藏，不是上面的一个框框之类的。
我的电脑是win10 自带的浏览器打不开地图效果，所以没有视图。
以上是关于初识SFDC创建一个google map（添加了marker小图标）的主要内容，如果未能解决你的问题，请参考以下文章
初识SFDC创建一个google map（添加了marker小图标上的小框框InfoWindow可变更文字）