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 相关文章推荐
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
jquery下异步提交表单 异步跨域提交表单
Nov 17 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
js中小数转换整数的方法
Jan 26 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
JavaScript实现刮刮乐效果
Nov 01 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 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
开发大型 PHP 项目的方法
2007/01/02 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
python执行子进程实现进程间通信的方法
2015/06/02 Python
python机器学习库常用汇总
2017/11/15 Python
Python字典遍历操作实例小结
2019/03/05 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
蔻驰法国官网:COACH法国
2018/11/14 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
初中家长寄语
2014/04/02 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
公司合作协议范文
2014/10/01 职场文书
公司租房协议书
2014/10/14 职场文书
世界遗产导游词
2015/02/13 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
道歉情书大全
2015/05/12 职场文书
追悼会家属答谢词
2015/09/29 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫