GoogleMapsAPI地图应用示例分享

网络编程 JavaScript javascript技巧 分类:[default] 更新日期: 2016-03-23
这篇文章主要分享一段了Google Maps API地图应用示例,做项目中经常会使用到,非常的简单,有需要的朋友可以参考下

效果(新版Firefox中测试):

GoogleMapsAPI地图应用示例分享

代码:

<!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 ></div>
</body>
</html>

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

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 提高代码可读性的十大注释技巧分享
    这篇文章主要介绍了提高代码可读性的十大注释技巧,详细分析了编程开发中常用的代码注释方法,需要的朋友可以参考下本文讲述了提高代码可读性的十大注释技巧.分享给大家供大家参考,具体如下: 很多程序员在写代码的时候往往都不注意代码的可读性,让别人在阅读代码时花费更多的时间.其实,只要程序员在写代码的时候,注意为代码加注释,并以合理的格式为代码加注释,这样就方便别人查 ...
  • asp.netcore实现文件上传功能
    asp.netcore实现文件上传功能
    这篇文章主要为大家详细介绍了asp.net core实现文件上传功能,怎么做单文件和多文件上传,感兴趣的小伙伴们可以参考一下本文实例为大家分享了单文件上传.多文件上传的功能,供大家参考,具体内容如下 单文件上传 上传文件在Web应用程序中是一个常见的功能.在asp.net core中上传文件并保存在服务器上,是很容易的.下面就来演示一下怎么样在 ASP.NE ...
  • Swift中内置的集合类型学习笔记
    Swift中内置的集合类型学习笔记
    Swift中自带数组.set.字典三大集合类型,这里将学习过程中的基础的Swift中内置的集合类型学习笔记进行整理,需要的朋友可以参考下一.引言 Swift中提供了3种集合类型,Array数据类型,Set集合类型,Dictionary字典类型.Array用于存放一组有序的数据,数据角标从0开始一次递增:Set用于存放一组无序的数据,数据不可以重复:Dicti ...
  • PHP微信开发之查询城市天气
    PHP微信开发之查询城市天气
    这篇文章主要为大家详细介绍了PHP微信开发之简单实现查询城市天气的相关资料,感兴趣的小伙伴们可以参考一下PHP微信查询城市天气,首先,你需要找到一个获取天气的API,此处,我用的是百度的apistore,申请和使用API的网址:http://apistore.baidu.com/apiworks/servicedetail/112.html  登录百度账号, ...
  • php英文单词统计器
    php英文单词统计器
    这篇文章主要为大家详细介绍了php英文单词统计器的实现代码,本文实例为大家分享了英文单词统计器php 实现,供大家参考,具体内容如下 程序开始运行, 按"浏览"钮选择一个英文文档, 再按"统计 Statistics"钮, 即可得到按字母顺序列出的所有单词,及其出现的次数 用于测试的数据文档: data.txt驱动程序: ...
  • Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
    这篇文章主要介绍了Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下今天项目经理刚交给一个活儿,要我实现这样一个功能:要实现的是验证码文本框变窄一点,然后右边加入一副验证码图片,并且在响应式布局的情况下在移动端访问的时候验证码图片能保持和验证码文本框在同一行,这个怎么做?难为了半天 ...
猜你喜欢