试用Google Map总结_google常量map-CSDN博客

代码片段(4)[全屏查看所有代码]

1. [图片] Google js

2. [图片] Google js

3. [代码]Map Code

 
       001 var map;
 
       002 var array = [[41.774166667, 85.943055556], [43.864052, 87.560499]];//经纬度
 
       003 var array1 = ["地点1", "地点2"];
 
       004 var latitude = 0;
 
       005 var longitude = 0;
 
       006 var markersArray = [];
 
       007 var title = "新疆";
 
       008 var openInfo = "";
 
       009  
 
       010 function initialize() {
 
       011      
 
       012     var i = 0;
 
       013     var k = 0;
 
       014     var myLatlng = new google.maps.LatLng(41.774166667, 85.943055556); //初始定位
 
       015     var myOptions = {
 
       016         zoom : 8, //地图的缩放程度
 
       017         center : myLatlng, //地图中心位置
 
       018         mapTypeId : google.maps.MapTypeId.ROADMAP, //常量ROADMAP以地图显示 常量SATELLITE为卫星显示
 
       019         disableDoubleClickZoom : true //禁用双击缩放地图
 
       020     };
 
       021      
 
       022     //把地图绑定在ID为map_canvas的DIV上
 
       023     map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
       024      
 
       025      
 
       026     //循环将数据填充到一个新的marker对象中
 
       027     for (i = 0; i < array.length; i++) {
 
       028          
 
       029         var myLatlng = new google.maps.LatLng(array[i][k], array[i][k + 1]);//重新定位
 
       030         //显示信息
 
       031         openInfo = array1[i];
 
       032         //显示地址的标记图标
 
       033         var marker = new google.maps.Marker({
 
       034                 position : myLatlng,
 
       035                 map : map,
 
       036                 icon : 'http://www.yiyacn.com/uploads/tubiaoimg/icon/fatcow_027.png' //自定义标记图标
 
       037             });
 
       038         marker.setTitle(title);
 
       039         alertTitle(marker, openInfo);
 
       040     };
 
       041      
 
       042     //infowindow.open(map);   //加载时显示提示主窗口
 
       043      
 
       044      
 
       045     var infowindow;
 
       046     var infowindow2;
 
       047     //提示信息窗口
 
       048     function alertTitle(marker, openInfo) {
 
       049          
 
       050         //鼠标悬浮在标记上打开提示信息窗口
 
       051         google.maps.event.addListener(marker, 'mouseover', function (event) {
 
       052             infowindow2 = infowindow;
 
       053             infowindow = new google.maps.InfoWindow({
 
       054                     content : openInfo,
 
       055                     position : myLatlng
 
       056                 });
 
       057             if (infowindow2 != null) {
 
       058                 infowindow2.close();
 
       059             }
 
       060             infowindow.open(map, marker);
 
       061              
 
       062         });
 
       063          
 
       064         //鼠标离开标记关闭提示信息窗口
 
       065         //google.maps.event.addListener(marker, 'mouseout', function(event) {
 
       066         //infowindow.close();
 
       067         //});
 
       068     };
 
       069      
 
       070     //给map添加双击事件
 
       071     google.maps.event.addDomListener(map, 'dblclick', function (event) {
 
       072          
 
       073         placeMarker(event.latLng);
 
       074         CreateDiv(event.latLng);
 
       075          
 
       076     });
 
       077      
 
       078     //添加新的标识
 
       079     function placeMarker(location) {
 
       080         if (infowindow2 != null) {
 
       081             infowindow2.close();
 
       082         }
 
       083         if (infowindow != null) {
 
       084             infowindow.close();
 
       085         }
 
       086         marker = new google.maps.Marker({
 
       087                 position : location,
 
       088                 map : map,
 
       089                 title : title,
 
       090                 icon : 'http://www.yiyacn.com/uploads/tubiaoimg/icon/fatcow_027.png' //自定义标记图标
 
       091                  
 
       092             });
 
       093         clearOverlays();
 
       094         markersArray.push(marker); //把marker对象添加到markersArray数组中
 
       095         map.setCenter(location); //重新定位中心位置
 
       096          
 
       097     }
 
       098      
 
       099     //创建操作层
 
       100     function CreateDiv(location) {
 
       101         var array = location.toString().split(","); //经纬度
 
       102          
 
       103         var contentString = '<div id="content">' +
 
       104             '<div id="siteNotice">' +
 
       105             '</div>' +
 
       106             '<h1 id="firstHeading" class="firstHeading">选择操作</h1>' +
 
       107             '<div id="bodyContent">' +
 
       108             '<p><b>当前的纬度' + array[0] + ',经度' + array[1] + '</b></p>' +
 
       109             '</div>' +
 
       110             '</div>';
 
       111          
 
       112         var infowindow = new google.maps.InfoWindow({
 
       113                 content : contentString
 
       114             });
 
       115          
 
       116         infowindow.open(map, marker);
 
       117          
 
       118     }
 
       119      
 
       120     //重置Map对象
 
       121     function clearOverlays() {
 
       122         //alert(markersArray);
 
       123         if (markersArray) {
 
       124             for (i in markersArray) {
 
       125                 markersArray[i].setMap(null);
 
       126             }
 
       127         }
 
       128     }
 
       129      
 
       130 }
 
       131  
 
       132 window.onload = initialize;

4. [代码]html 跳至 [3] [4] [全屏预览]

 
       1 <body > 
 
       2   
 
       3     <div id="map_canvas" style="width: 100%; height: 100%"></div> 
 
       4 </body>