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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
json数据处理及数据绑定
Jan 25 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
JS字符串与二进制的相互转化实例代码详解
Jun 28 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获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
php获取操作系统语言代码
2013/11/04 PHP
php学习笔记之面向对象
2014/11/08 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
php中如何执行linux命令详解
2018/11/06 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
jQuery读取XML文件的方法示例
2017/02/03 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
Python 除法小技巧
2008/09/06 Python
Python多进程编程技术实例分析
2014/09/16 Python
python元组操作实例解析
2014/09/23 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
linux环境下Django的安装配置详解
2019/07/22 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
离婚答辩状范文
2015/05/22 职场文书