SFDC_01(google map)

前几天写了几个关于google的随笔重新修改一下。

本例实现的效果是这样的。引用的自定义的图标，图标上有数字，缩放后如下图。

 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     
 7             
 8             function myLoad() {
 9             
10                 //地图的经纬度信息。
11                 var lat = 39;
12                 var lng = 116;
13                     var myLatLng = new google.maps.LatLng(lat, lng);
14                     
15                     //要创建的marker的经纬度信息，也可以直接引用上面的myLstLng;这里我要循环。
16                     var latList = [39,40,41,42];
17                 var lngList = [116,116,116,116];
18                     
19                     //这里存放地图的基本信息
20                 var myOptions = {
21 
22                     zoom: 8,     //zoom参数是地图的范围，参数越小，地图的范围就越大
23 
24                     center: myLatLng,    //center是地图的中心点，通过经纬度定义
25                     
26                     mapTypeId: google.maps.MapTypeId.ROADMAP    //mapTypeId：是地图的类型。有四种map可选
27                                                                 //mapTypeId: google.maps.MapTypeId.HYBRID：显示卫星图像的主要街道透明层
28                                                                 //mapTypeId: google.maps.MapTypeId.ROADMAP：显示普通的街道地图
29                                                                 //mapTypeId: google.maps.MapTypeId.SATELLITE：显示卫星图像
30                                                                 //mapTypeId: google.maps.MapTypeId.TERRAIN：显示带有自然特征（如地形和植被）的地图
31                 };
32                 
33                 //创建一个地图，放置的位置是id为map的图层上，地图的基本信息是 myOptions；
34                 var map = new google.maps.Map(document.getElementById("map"), myOptions);
35                 
36                 //地图创建完毕之后创建marker，如果只要创建一个就只用循环里面的代码即可。
37                 for (var i=0;i<latList.length;i++){
38                     var myLatLng1 = new google.maps.LatLng(latList[i], lngList[i]);
39                     
40                     //label显示的值是String类型的，i是int类型的所以要转换一下。
41                         var j = i+1+"";
42                         
43                         //创建marker。
44                     var marker = new google.maps.Marker({
45                           position: myLatLng1,
46                           label:j,
47                           map: map,
48                           icon: "http://img.zcool.cn/community/01d9b15541bb21000001e78c6478c5.jpg@24w_32h_1c_1e_2o.png",
49                           draggable: true    //是否可拖拽。
50                           });
51                       //marker.setMap(map);    //和map: map实现同样功能,
52                 }    
53             }
54             window.onload = myLoad;
55         </script>    
56     </head>
57     <body>
58         <style>
59               #map {
60                 width: 500px;
61                 height: 400px;
62                 float: left;
63               }
64           </style>
65           <div id="map"></div>
66     </body>
67 </apex:page>
View Code

如果把marker里面的icon：“”，去掉，显示的效果是下图

 

posted @ 2016-06-14 14:23  诸葛四郎  阅读(153)  评论(0)  编辑  收藏  举报