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 相关文章推荐
jqeury eval将字符串转换json的方法
Jan 20 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
javascript实现日期格式转换
Dec 16 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
深入分析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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
5.PHP的其他功能
2006/10/09 PHP
php 文本文件的读取效率
2012/02/10 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
理解Javascript闭包
2013/11/01 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python异步任务队列示例
2014/04/01 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
2014年情人节活动方案
2014/02/16 职场文书
大班幼儿评语大全
2014/04/30 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android