Google Maps API地图应用示例分享


Posted in Javascript onOctober 23, 2014

效果(新版Firefox中测试):

Google Maps API地图应用示例分享

代码:

<!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

Javascript 相关文章推荐
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
深入分析JQuery和JavaScript的异同
Oct 23 #Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 #Javascript
用jquery模仿的a的title属性的例子
Oct 22 #Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 #Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 #Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 #Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 #Javascript
You might like
php debug 安装技巧
2011/04/30 PHP
优化PHP程序的方法小结
2012/02/23 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
材料采购员岗位职责
2015/04/03 职场文书
让世界充满爱观后感
2015/06/10 职场文书
老人与海读书笔记
2015/06/26 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
小学大队委竞选口号
2015/12/25 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
浅谈Python numpy创建空数组的问题
2021/05/25 Python