来源：http://www.ido321.com/1089.html

效果（新版Firefox中测试）：

代码：

<!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" style="width:400px; height:400px"></div>

</body>

</html>

Google Maps JavaScript API v3（参考文档）：https://developers.google.com/maps/documentation/javascript/basics

百度地图API的参考文档：http://developer.baidu.com/map/jsmobile.htm

下一篇：如何在网站中添加支付宝支付功能？？？

Google Maps API显示地图的小示例的更多相关文章

  1. 如何插入谷歌地图并获取javascript api 秘钥--Google Maps API error: MissingKeyMapError

    参考:https://blog.csdn.net/klsstt/article/details/51744866 Google Maps API error: MissingKeyMapError h ...

  2. Google Maps API V3 之 图层

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  3. Google Maps API V3 之 路线服务

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  4. Google Maps API V3 之绘图库 信息窗口

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  5. Google Map Api 谷歌地图接口整理

    一:基本知识: 1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点: 1.假如使用 API 的页面还没有发布,只是在本地调试,可以不用密钥,随便用个字符串代替就可以了. ...

  6. Google Maps API Web Services

    原文:Google Maps API Web Services 摘自:https://developers.google.com/maps/documentation/webservices/ Goo ...

  7. Google maps API开发

    原文:Google maps API开发 Google maps API开发(一) 最近做一个小东西用到google map,突击了一下,收获不小,把自己学习的一些小例子记录下来吧 一.加载Googl ...

  8. Google maps API开发（二）(转)

    这一篇主要实现怎么调用Google maps API中的地址解析核心类GClientGeocoder: 主要功能包括地址解析.反向解析.本地搜索.周边搜索等, 我这里主要有两个实例: 实例一.当你搜索 ...

  9. 如何将经纬度利用Google Map API显示C# VS2005 Sample Code

    原文 如何将经纬度利用Google Map API显示C# VS2005 Sample Code 日前写了一篇如何用GPS抓取目前所在,并回传至资料库储存,这篇将会利用这些回报的资料,将它显示在地图上 ...

随机推荐

  1. springMVC获取request和response

    转载:http://blog.sina.com.cn/s/blog_7085382f0102v9jg.html 1.参数 例如: @RequestMapping("/test") ...

  2. JDK安装配置问题

    JDK安装过程中会有两个安装提示,一个是jdk的安装,一个是jre的安装

  3. powerdesigner连接数据库 导出数据 生成PDM文件 傻瓜试教程

    也可下载文档:http://download.csdn.net/detail/shutingwang/6378665 

  4. BZOJ 3123 森林(函数式线段树)

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=3123 题意: 思路:总的来说,查询区间第K小利用函数式线段树的减法操作.对于两棵树的合并 ...

  5. group by的SQL语句

    有一张项目表 CREATE TABLE [ProjectTable] ( [ProjectID] NVARCHAR(16) NOT NULL, [ProjectName] NVARCHAR(20) N ...

  6. 好！recover-binary-search-tree（难）& 两种好的空间O(n)解法 & 空间O(1)解法

    https://leetcode.com/mockinterview/session/result/xyc51it/https://leetcode.com/problems/recover-bina ...

  7. 将多个.a库合并为一个.a库的方法

    如果编译了多个架构的静态库,想将它们合并为一个静态库的时候,可以用如下方法合并: sudo lipo -create /libs/ffmpeg/2.6.3/arm64/lib/libavcodec.a ...

  8. Android adb install INSTALL_FAILED_DEXOPT

    说明: 之前一直认为将eclipse的Android项目直接cp到Android源码下编译就行了,实际情况是还要注意其他的文件架构. 错误现象: c:\Users\zengjf>adb inst ...

  9. 基于ffmpeg的流媒体服务器

    OS:ubuntu 12.04ffmpeg:N-47141-g4063bb2x264:0.133.2334 a3ac64b目标:使用ffserver建立流媒体服务器使用ffmpeg对本地文件流化(x2 ...

  10. java后台调用HttpURLConnection类模拟浏览器请求(一般用于接口调用)

    项目开发中难免遇到外部接口的调用,小生今天初次接触该类,跟着API方法走了一遍,如有不对的地方,还请哆哆指正,拜谢! 1 package com.cplatform.movie.back.test; ...