前几天写了几个关于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>
如果把marker里面的icon：“”，去掉，显示的效果是下图
