Google Maps API地图应用示例分享

效果（新版Firefox中测试）：

代码：

<!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（参考文档）：https://developers.google.com/maps/documentation/javascript/basics

百度地图API的参考文档：http://developer.baidu.com/map/jsmobile.htm

赞 (0)

相关推荐

  • Google 地图获取API Key详细教程

    Google 地图获取API Key详细教程

    Google 地图API Key 开始学习本教程前,你需要拥有一个免费的 Google 地图 API key. 开始学习? 开始学习本教程前,你需要在Google上申请一个指定的API key. 通过以下步骤我们可以免费获取 API key . 访问 https://code.google.com/apis/console/, 使用你的Google账号登陆. 登陆后会出现如下界面: 点击 "Create Project" 按钮. 在服务列表中找到 Google Maps API v3,

  • Google 地图API资料整理及详细介绍

    Google 地图API 参考手册 地图 构造函数/对象 描述 Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素. 叠加层 构造函数/对象 描述 Marker 创建一个标记. MarkerOptions 标记的选项.由DirectionsRenderer渲染的所有标记都将使用这些选项. MarkerImage A structure representing a Marker icon or shadow image MarkerShape Defines the

  • js+html5获取用户地理位置信息并在Google地图上显示的方法

    本文实例讲述了js+html5获取用户地理位置信息并在Google地图上显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to get your position:</p> <button onclick="getLocation()">Try It</button&

  • 在Google 地图上实现做的标记相连接

    这里仅仅是将谷歌地图API的使用方法告诉大家,算是抛砖引玉吧,由于某些原因,谷歌已经远离大家了. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>GeoLocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta char

  • Google 地图叠加层实例讲解

    Google 地图叠加层实例讲解

    Google 地图 - 叠加层 叠加层是地图上绑定到经度/纬度坐标的对象,会随您拖动或缩放地图而移动. Google 地图 API 有如下几种叠加层: 1.地图上的点使用标记来显示,通常显示自定义图标.标记是 GMarker 类型的对象,并且可以利用 GIcon 类型的对象来自定义图标. 2.地图上的线使用折线(表示点的集合)来显示.线是类型为 GPolyline 的对象. 3.地图上的区域显示为多边形(如果是任意形状的区域)或底面叠加层(如果是矩形区域).多边形类似于闭合的折线,因此可以是任何

  • Google 地图类型详解及示例代码

    Google 地图类型 Google 地图- 基本地图类型 Google Maps API 中提供了以下地图类型: 1.MapTypeId.ROADMAP,用于显示默认的道路地图视图 2.MapTypeId.SATELLITE,用于显示 Google 地球卫星图片 3.MapTypeId.HYBRID,用于同时显示普通视图和卫星视图 4.MapTypeId.TERRAIN,用于根据地形信息显示实际地图. 要通过 Map 修改正在使用的地图类型,您可以为其设置 mapTypeId 属性: var

  • 百度地图经纬度转换到腾讯地图/Google 对应的经纬度

    实现目的:将百度地图经纬度 转换到 腾讯地图/Google 对应的经纬度. 方法1:使用代码进行转换 存在的问题:转换之后误差大,基本不可用 public static void Convert_BD09_To_GCJ02(double lat, double lng) { double x_pi = Math. PI * 3000.0 / 180.0; double x = lng - 0.0065, y = lat - 0.006; double z = Math. sqrt(x * x +

  • Google 地图API Map()构造器详解

    地图 API Map() 构造器 实例 创建一个 Google 地图: <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> function initialize() { var map

  • Google 地图事件实例讲解

    Google 地图事件 点击标记缩放地图 我们仍然使用上一遍文章使用的英国伦敦的地图. 点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件). 代码如下: <html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script>

  • Google 地图控件集详解及实例代码

    Google 地图控件集详解及实例代码

    Google 地图控件集 Google 地图 - 默认控件集设置: 当使用一个标准的google地图,它的默认设置如下: 1.Zoom-显示一个滑动条来控制map的Zoom级别 2.PPan-地图上显示的是一个平底碗样的控件,点击4个角平移地图 3.MapType-允许用户在map types(roadmap 和 satallite)之间切换 4.StreetView-显示为一个街景小人图标,可拖拽到地图上某个点来打开街景 Google 地图 - 更多控件集 除了以上默认控件集,Google还有

随机推荐