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使用手册之三 CSS操作
Mar 24 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
jQuery学习基础知识小结
Nov 25 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
js判断当前浏览器类型,判断IE浏览器方法
Jun 02 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 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使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
js实现交换运动效果的方法
2015/04/10 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
Python threading多线程编程实例
2014/09/18 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
python目录与文件名操作例子
2016/08/28 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python微信库:itchat的用法详解
2017/08/14 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
对python中的logger模块全面讲解
2018/04/28 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
教师工作表现自我评价
2015/03/05 职场文书
淮海战役观后感
2015/06/11 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书