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 相关文章推荐
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
js动态为代码着色显示行号
May 29 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
shiro授权的实现原理
Sep 21 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
JavaScript继承的三种方法实例
May 12 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
HTML的select控件美化
2017/03/27 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
django云端留言板实例详解
2019/07/22 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
用python读取xlsx文件
2020/12/17 Python
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
医学生职业规划范文
2014/01/05 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
执行力心得体会范文
2016/01/11 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
志愿者工作心得体会
2016/01/15 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript