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 相关文章推荐
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
Jquery同辈元素选中/未选中效果的实例代码
Aug 01 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 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
paypal即时到账php实现代码
2010/11/28 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
python 正则式使用心得
2009/05/07 Python
python实现得到一个给定类的虚函数
2014/09/28 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
保洁主管岗位职责
2013/11/20 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
小学生检讨书大全
2014/02/06 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
摄影展策划方案
2014/06/02 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
工程质量保证书
2015/05/09 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
MySQL注入基础练习
2021/05/30 MySQL
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js