zoukankan      html  css  js  c++  java
  • 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                  500px;
    61                 height: 400px;
    62                 float: left;
    63               }
    64           </style>
    65           <div id="map"></div>
    66     </body>
    67 </apex:page>
    View Code

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

  • 相关阅读:
    Windows Service 2016 DatacenterStandEmbedded激活方法
    批处理文件设置IP以及DNS
    C#类的一些基础知识(静态方法可以不用实例化调用)
    Dynamics Crm Plugin插件注册的问题及解决方案(持续更新。。。。。。)
    【转载】C# get 与set的一些说明
    C#补位函数PadLeft和PadRight
    Kubernetes集群调度之Scheduler
    Kubernetes集群控制之ControllerManager
    Kubernetes集群大脑之apiserver
    Kubernetes集群存储之etcd
  • 原文地址:https://www.cnblogs.com/panxing/p/5583940.html
Copyright © 2011-2022 走看看