谷歌 Maps API地图应用示范共享

2019-07-25 08:45栏目:WRB前端

效果(新版Firefox中测试):

Google 地图API 参考手册

图片 1

地图

代码:

构造函数/对象 描述
Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素。
<!DOCTYPE>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>Google Map</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function init()
    {
      // 获取当前位置
      navigator.geolocation.getCurrentPosition(function(position)
        {
          var coords = position.coords;
          // 设定地图参数,将当前位置的经纬度设置为中心点
          var latlng = new google.maps.LatLng(coords.latitude,coords.longitude);
          var myOptions = 
          {
            // 放大倍数
            zoom:14, 
            // 标注坐标
            center:latlng,
            // 地图类型
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };
          var map1;
          // 显示地图
          map1 = new google.maps.Map(document.getElementById('map'),myOptions);
          // 创建标记
          var marker = new google.maps.Marker(
            {
              position:latlng,
              map:map1
            });
          // 设定标注窗口,附上注释文字
          var infowindow = new google.maps.InfoWindow(
            {
              content:"当前位置"
            });
          // 打开标注窗口
          infowindow.open(map1,marker);
        });
    }
  </script>
</head>
<body onload="init()">
  <div id="map"></div>
</body>
</html>

叠加层

Google Maps JavaScript API v3(参考文档):

构造函数/对象 描述
Marker 创建一个标记。
MarkerOptions 标记的选项。由DirectionsRenderer渲染的所有标记都将使用这些选项。
MarkerImage A structure representing a Marker icon or shadow image
MarkerShape Defines the marker shape to use in determination of a marker's clickable region (type and coord)
Animation Specifies animations that can be played on a marker (bounce or drop)
InfoWindow Creates an info window
InfoWindowOptions Options for rendering the info window
Polyline Creates a polyline (contains path and stroke styles)
PolylineOptions Options for rendering the polyline
Polygon Creates a polygon (contains path and stroke fill styles)
PolygonOptions Options for rendering the polygon
Rectangle Creates a rectangle (contains bounds and stroke fill styles)
RectangleOptions Options for rendering the rectangle
Circle Creates a circle (contains center radius and stroke fill styles)
CircleOptions Options for rendering the circle
GroundOverlay  
GroundOverlayOptions  
OverlayView  
MapPanes  
MapCanvasProjection  

百度地图API的参考文档:

事件

您可能感兴趣的文章:

  • Google 地图API资料整理及详细介绍
  • Google 地图类型详解及示例代码
  • Google 地图控件集详解及实例代码
  • Google 地图事件实例讲解
  • Google 地图叠加层实例讲解
  • Google 地图获取API Key详细教程
  • 百度地图经纬度转换到腾讯地图/Google 对应的经纬度
  • js html5获取用户地理位置信息并在Google地图上显示的方法
  • 在Google 地图上实现做的标记相连接
  • Google 地图API Map()构造器详解
构造函数/对象 描述
MapsEventListener It has no methods and no constructor. Its instances are returned from addListener(), addDomListener() and are eventually passed back to removeListener()
event Adds/Removes/Trigger event listeners
MouseEvent Returned from various mouse events on the map and overlays

控件集

 

构造函数/对象 描述
MapTypeControlOptions Holds options for modifying a control (position and style)
MapTypeControlStyle Specifies what kind of map control to display (Drop-down menu or buttons)
OverviewMapControlOptions Options for rendering of the overview map control (opened or collapsed)
PanControlOptions Options for rendering of the pan control (position)
RotateControlOptions Options for rendering of the rotate control (position)
ScaleControlOptions Options for rendering of the scale control (position and style)
ScaleControlStyle Specifies what kind of scale control to display
StreetViewControlOptions Options for rendering of the street view pegman control (position)
ZoomControlOptions Options for rendering of the zoom control (position and style)
ZoomControlStyle Specifies what kind of zoom control to display (large or small)
ControlPosition Specifies the placement of controls on the map

 以上就是对 Google 地图API资料整理,后续继续补充相关知识,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • Google 地图类型详解及示例代码
  • Google 地图控件集详解及实例代码
  • Google 地图事件实例讲解
  • Google 地图叠加层实例讲解
  • Google 地图获取API Key详细教程
  • 百度地图经纬度转换到腾讯地图/Google 对应的经纬度
  • js html5获取用户地理位置信息并在Google地图上显示的方法
  • 在Google 地图上实现做的标记相连接
  • Google Maps API地图应用示例分享
  • Google 地图API Map()构造器详解

版权声明:本文由威尼斯人app发布于WRB前端,转载请注明出处:谷歌 Maps API地图应用示范共享