首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Google 地图叠加层实例讲解

Posted in Javascript onAugust 06, 2016

Google 地图 - 叠加层

叠加层是地图上绑定到经度/纬度坐标的对象，会随您拖动或缩放地图而移动。

Google 地图 API 有如下几种叠加层：

1.地图上的点使用标记来显示，通常显示自定义图标。标记是 GMarker 类型的对象，并且可以利用 GIcon 类型的对象来自定义图标。

2.地图上的线使用折线（表示点的集合）来显示。线是类型为 GPolyline 的对象。

3.地图上的区域显示为多边形（如果是任意形状的区域）或底面叠加层（如果是矩形区域）。多边形类似于闭合的折线，因此可以是任何形状。地面叠加层通常用于地图上与图块有直接或间接关联的区域。

4.地图本身使用图块叠加层显示。如果您有自己的系列图块，可以使用 GTileLayerOverlay 类来改变地图上已有的图块，甚至可以使用 GMapType 来创建您自己的地图类型。

5.信息窗口也是一种特殊的叠加层。但是请注意，信息窗口会自动添加到地图中，并且地图只能添加一个类型为 GInfoWindow 的对象。

Google 地图 - 添加标记

记标识地图上的点。默认情况下，它们使用 G_DEFAULT_ICON（您也可以指定自定义图标）。GMarker 构造函数将 GLatLng 和 GMarkerOptions（可选）对象作为参数。

标记设计为可交互。例如，默认情况下它们接收 "click" 事件，常用于在事件侦听器中打开信息窗口。

通过 setMap() 方法在地图上添加标记:

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
 center:myCenter,
 zoom:5,
 mapTypeId:google.maps.MapTypeId.ROADMAP
 };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
 position:myCenter,
 });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

实例效果图：

Google 地图叠加层实例讲解

Google 地图 - 可拖动的标记

以下实例将介绍如何使用 animation 属性来拖动标记:

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var marker;

function initialize()
{
var mapProp = {
 center:myCenter,
 zoom:5,
 mapTypeId:google.maps.MapTypeId.ROADMAP
 };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

marker=new google.maps.Marker({
 position:myCenter,
 animation:google.maps.Animation.BOUNCE
 });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Google 地图 - 图标

标记可以用自定义的新图标来显示，以替代默认图标:

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
 center:myCenter,
 zoom:5,
 mapTypeId:google.maps.MapTypeId.ROADMAP
 };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
 position:myCenter,
 icon:'pinkball.png'
 });

marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Google 地图 - 折线

GPolyline 对象可在地图上创建线性叠加层。GPolyline 包括一系列点，并创建一系列有序连接这些点的线段。

折线支持以下属性：

path - 指定了多个直线的纬度/经度坐标
strokeColor - 指定直线的十六进制颜色值(格式: "#FFFFFF")
strokeOpacity - 指定直线的透明度(该值为 0.0 到 1.0)
strokeWeight - 定义线的宽度,以像素为单位。
editable - 定义用户是否可编辑直线(true/false)

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
 center:x,
 zoom:4,
 mapTypeId:google.maps.MapTypeId.ROADMAP
 };
 
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myTrip=[stavanger,amsterdam,london];
var flightPath=new google.maps.Polyline({
 path:myTrip,
 strokeColor:"#0000FF",
 strokeOpacity:0.8,
 strokeWeight:2
 });

flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

实例效果图：

Google 地图叠加层实例讲解

Google 地图 - 多边形

GPolygon 对象类似于 GPolyline 对象，因为它们都包括一系列有序的点。但是，多边形不像折线一样有两个端点，而是设计为定义形成闭环的区域。

和折线一样，您可以自定义多边形边（线）的颜色、粗细和透明度，以及封闭的填充区域的颜色和透明度。颜色应是十六进制数字 HTML 样式。

多边形支持以下属性：

path - 指定多个直线纬度的坐标 (第一个和最后一个坐标是相等的)
strokeColor - 指定直线的十六进制颜色值(格式: "#FFFFFF")
strokeOpacity -指定直线的透明度(该值为 0.0 到 1.0)
strokeWeight - 定义线的宽度,以像素为单位。
fillColor - 指定闭合区域的十六进制颜色值 (格式: "#FFFFFF")
fillOpacity - 指定填充颜色的透明度 (该值为 0.0 到 1.0)
editable - 定义用户是否可编辑直线(true/false)

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
 center:x,
 zoom:4,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myTrip=[stavanger,amsterdam,london,stavanger];
var flightPath=new google.maps.Polygon({
 path:myTrip,
 strokeColor:"#0000FF",
 strokeOpacity:0.8,
 strokeWeight:2,
 fillColor:"#0000FF",
 fillOpacity:0.4
 });

flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

实例效果图：

Google 地图叠加层实例讲解

Google 地图 - 圆

圆支持以下属性：

center - 指定圆的中心点参数 google.maps.LatLng
radius - 指定圆的半径，以米为单位
strokeColor - 指定弧线的十六进制颜色值(格式: "#FFFFFF")
strokeOpacity - 指定弧线的透明度(该值为 0.0 到 1.0)
strokeWeight -定义线的宽度,以像素为单位。
fillColor - 指定圆的十六进制颜色值填充值 (格式: "#FFFFFF")
fillOpacity - 指定填充颜色的透明度 (该值为 0.0 到 1.0)
定义用户是否可编辑直线(true/false)

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
function initialize()
{
var mapProp = {
 center:amsterdam,
 zoom:7,
 mapTypeId:google.maps.MapTypeId.ROADMAP
 };
 
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myCity = new google.maps.Circle({
 center:amsterdam,
 radius:20000,
 strokeColor:"#0000FF",
 strokeOpacity:0.8,
 strokeWeight:2,
 fillColor:"#0000FF",
 fillOpacity:0.4
 });

myCity.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

实例效果图：

Google 地图叠加层实例讲解

Google 地图 - 信息窗口

在一个标记上显示一个文本信息窗口：

实例

<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
var mapProp = {
 center:myCenter,
 zoom:5,
 mapTypeId:google.maps.MapTypeId.ROADMAP
 };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
 position:myCenter,
 });

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
 content:"Hello World!"
 });

infowindow.open(map,marker);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

实例效果图：

Google 地图叠加层实例讲解

以上就是对Google 地图叠加层的资料整理，后续继续补充，谢谢大家对本站的支持！

Google 地图叠加层实例讲解

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
扩展String功能方法
Sep 22 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
基于JavaScript实现下拉列表左右移动代码
Feb 07 Javascript
jquery仿微信聊天界面
May 06 jQuery
微信小程序上线发布流程图文详解
May 06 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
Google Maps基础及实例解析
Aug 06 #Javascript
浅谈js的html元素的父节点,子节点
Aug 06 #Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 #Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 #Javascript
Google 地图获取API Key详细教程
Aug 06 #Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 #Javascript
深入理解JS DOM事件机制
Aug 06 #Javascript
BeautifulSoup4(2) SeaTunnel(1) ftpserver(1) Odoo(1) NFS(1) OpenAI baselines(1) ElementTree(1) tkFileDialog(1) 黑名单(1) tfx(1)
You might like
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
PHP使用函数用法详解
2018/09/30 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
js类型检查实现代码
2010/10/29 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
python妹子图简单爬虫实例
2015/07/07 Python
Django 连接sql server数据库的方法
2018/06/30 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
Python基础之文件读取的讲解
2019/02/16 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
python获取整个网页源码的方法
2020/08/03 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
XML文档面试题
2015/08/05 面试题
给全校老师的建议书
2014/03/13 职场文书
校庆活动策划方案
2014/06/05 职场文书
谢师宴学生致辞
2015/07/27 职场文书
2019大学生实习报告
2019/06/21 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
nginx内存池源码解析
2021/11/20 Servers