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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
JS实现页面数据懒加载
Feb 13 Javascript
基于javascript实现放大镜特效
Dec 03 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
深入分析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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
浅谈node模块与npm包管理工具
2018/01/03 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
python列表去重的二种方法
2014/02/14 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
python中的json总结
2018/10/11 Python
python字典的遍历3种方法详解
2019/08/10 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
土建资料员岗位职责
2014/01/04 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
国培教师自我鉴定
2014/02/12 职场文书
运动会入场词50字
2014/02/20 职场文书
党员大会主持词
2014/04/02 职场文书
销售团队激励口号
2014/06/06 职场文书
军训口号
2014/06/13 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
小学教师见习总结
2015/06/23 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL