Google Map V3笔记总结

浅浅的花香味﹌ 2022-01-27 08:49 233阅读 0赞

谷歌V3版本已经不需要key了，JAVASCRIPT的API与百度也差不多(想了解百度地图的可以看下我的博客)，但总体来说谷歌的API更多，功能更强大，开发的灵活性也更好。然而，可能是我的网速不行，我总觉得谷歌很卡，百度很流畅。以下是我常用的一些功能：

1.初始化地图

var map;
          function initialize() {
              var mapOptions = {
                  zoom: 14,
                  center: new google.maps.LatLng(34.2323, 108.9616),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);
    
          }
          google.maps.event.addDomListener(window, 'load', initialize);

2.添加marker

marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: parliament
            });

最核心的2个属性为map，和position，position的值必须返回为LatLng，如可定义position为position:new google.maps.LatLng(34.2323, 108.9616)  
3.批量添加、隐藏和删除marker

function setAllMap(map) {//批量添加
                for (var i = 0; i < markers.length; i++) {
                    markers[i].setMap(map);//markers为存放marker的数组
                }
            }

//隐藏 
    function clearOverlays() {
                setAllMap(null);//此时并未删除marker对象,只是不在地图上了
            }

还有个简单的办法隐藏marker，就是利用marker的可见性属性，即this.marker.visible=false；

//删除
     function DeleteOverlays() {
                setAllMap(map);
                markers.lenght=0;//清空marker数组
            }

4.marker的事件

谷歌添加事件的规则为 google.maps.event.addListener(对象, 事件名, 代码);如：

google.maps.event.addListener(marker, 'click', function (e) \{  
                placeMarker(e.latLng, map);  
            \});

谷歌取消事件的规则为 google.maps.event.removeListener(listener);如

var click\_lis=

google.maps.event.addListener(marker, 'click', function (e) \{  
                placeMarker(e.latLng, map);  
            \});

google.maps.event.removeListener(click\_lis);

单击和右击这些基本的事件就不说了，对于marker来说有一个比较常用的就是拖拽事件，在定义marker的时候设置draggable为true即可拖拽(见上).

5.画直线

//定义点
    var flightPlanCoordinates = [
            new google.maps.LatLng(37.772323, -122.214897),
            new google.maps.LatLng(21.291982, -157.821856),
            new google.maps.LatLng(-18.142599, 178.431),
            new google.maps.LatLng(-27.46758, 153.027892)
        ];
    //定义线
            var flightPath = new google.maps.Polyline({
                path: flightPlanCoordinates,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
    //将线添加至地图
            flightPath.setMap(map);

6.画图工具调用

<!DOCTYPE html> 
    <html> 
      <head> 
        <title>Drawing tools</title> 
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
        <meta charset="utf-8"> 
        <link href="default.css" rel="stylesheet"> 
        <script src="https://ditu.google.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script> 
        <script> 
    function initialize() { 
      var mapOptions = { 
        center: new google.maps.LatLng(-34.397, 150.644), 
        zoom: 8, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
     
      var map = new google.maps.Map(document.getElementById('map-canvas'), 
        mapOptions); 
     
      var drawingManager = new google.maps.drawing.DrawingManager({ 
        drawingMode: google.maps.drawing.OverlayType.MARKER, 
        drawingControl: true, 
        drawingControlOptions: { 
          position: google.maps.ControlPosition.TOP_CENTER, 
          drawingModes: [ 
            google.maps.drawing.OverlayType.MARKER, 
            google.maps.drawing.OverlayType.CIRCLE, 
            google.maps.drawing.OverlayType.POLYGON, 
            google.maps.drawing.OverlayType.POLYLINE, 
            google.maps.drawing.OverlayType.RECTANGLE 
          ] 
        }, 
        markerOptions: { 
          icon: 'images/beachflag.png' 
        }, 
        circleOptions: { 
          fillColor: '#ffff00', 
          fillOpacity: 1, 
          strokeWeight: 5, 
          clickable: false, 
          editable: true, 
          zIndex: 1 
        } 
      }); 
      drawingManager.setMap(map); 
    } 
     
    google.maps.event.addDomListener(window, 'load', initialize); 
     
        </script> 
      </head> 
      <body> 
        <div id="map-canvas"></div> 
      </body> 
    </html>

7.右键菜单

这个功能比较复杂，我自己也是改编的别人的代码，不过有一个雏形版本到是可以参考。

下载地址：[http://download.csdn.net/detail/kkkkkxiaofei/5546917][http_download.csdn.net_detail_kkkkkxiaofei_5546917]

[http_download.csdn.net_detail_kkkkkxiaofei_5546917]: http://download.csdn.net/detail/kkkkkxiaofei/5546917