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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
Bootstrap零基础入门教程(三)
Jul 18 Javascript
Javascript的比较汇总
Jul 25 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
Angular7.2.7路由使用初体验
Mar 01 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
vue实现购物车的监听
Apr 20 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
基于pear auth实现登录验证
2010/02/26 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
Bootstrap每天必学之响应式导航、轮播图
2016/04/25 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
Python AES加密实例解析
2018/01/18 Python
django的登录注册系统的示例代码
2018/05/14 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
类如何去实现接口
2013/12/19 面试题
计算机大学生的自我评价
2013/10/15 职场文书
中式餐厅创业计划书范文
2014/01/23 职场文书
亲子拓展活动方案
2014/02/20 职场文书
三方股东合作协议书
2014/10/28 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
病危通知书样本
2015/04/17 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书