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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
深入分析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
基于mysql的bbs设计(二)
2006/10/09 PHP
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
laravel 数据验证规则详解
2019/10/23 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
ECMAscript 变量作用域总结概括
2017/08/18 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
wxpython绘制圆角窗体
2019/11/18 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
八年级历史教学反思
2014/01/10 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
离婚协议书怎么写的
2014/12/14 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
Android中View.post和Handler.post的关系
2022/06/05 Java/Android