首页
所有分类
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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
Javascript Symbol原理及使用方法解析
Oct 22 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
set(1) 并发(8) 字典(3) TableField(1) frozenset(1) el-table(1) Mybatis-Plus(3) Next.js(1) SingleFlight(2) 脚手架(2)
You might like
一棵php的类树(支持无限分类)
2006/10/09 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
PHP JSON出错：Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
使用tensorflow实现AlexNet
2017/11/20 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
python实现同一局域网下传输图片
2020/03/20 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
Speedo美国：澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
思想汇报范文
2013/11/04 职场文书
班级入场式解说词
2014/02/01 职场文书
洗车工岗位职责
2014/03/15 职场文书
计算机专业求职信
2014/06/02 职场文书
全陪导游词
2015/02/04 职场文书
2015年推普周活动总结
2015/03/27 职场文书
小学语文教学反思范文
2016/03/03 职场文书