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 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
javascript中数组的冒泡排序使用示例
Dec 18 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
Javascript基础教程之变量
Jan 18 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 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
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
keras.layer.input()用法说明
2020/06/16 Python
详解Python中的路径问题
2020/09/02 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
数据库方面面试题
2012/04/22 面试题
银行实习生的自我评价
2013/12/09 职场文书
运动会跳远广播稿
2014/02/04 职场文书
《学棋》教后反思
2014/04/14 职场文书
大学生社会实践评语
2014/04/25 职场文书
学校端午节活动方案
2014/08/23 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
创业计划书之网吧
2019/10/10 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
MySQL 十大常用字符串函数详解
2021/06/30 MySQL