Google Map V3笔记总结

谷歌地图V3 API核心功能详解

最新推荐文章于 2022-08-24 10:44:27 发布

原创最新推荐文章于 2022-08-24 10:44:27 发布 · 7.4k 阅读

4 ·

CC 4.0 BY-SA版权

GIS 专栏收录该内容

4 篇文章

订阅专栏

这篇博客总结了Google Maps V3版本的关键特性，包括无需key的初始化地图、添加marker、批量操作marker、marker事件处理如点击和拖拽，以及绘制直线和使用画图工具。同时提到了实现右键菜单的复杂性，并提供了参考资料链接。

谷歌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.youkuaiyun.com/detail/kkkkkxiaofei/5546917