首页
所有分类
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 相关文章推荐
JavaScript 给汉字排序实例代码
Jun 28 Javascript
jquery 实现的全选和反选
Apr 15 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
深入理解JavaScript系列（30）：设计模式之外观模式详解
Mar 03 Javascript
jQuery选择器源码解读（三）：tokenize方法
Mar 31 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
小程序关于请求同步的总结
May 05 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
Vite(1) 脚本(1) 数据备份(2) expdp(1) dict(1) 字符画(1) cudnn(1) 热力图(1) callback(1) hook(1)
You might like
php文件上传的例子及参数详解
2013/12/12 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
通过js动态操作table(新增，删除相关列信息)
2012/05/23 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
js中方法重载如何实现？以及函数的参数问题
2013/08/01 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
JS实现简单的表格增删
2020/01/16 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
利用python代码写的12306订票代码
2015/12/20 Python
Python3最长回文子串算法示例
2019/03/04 Python
Django用户身份验证完成示例代码
2020/04/03 Python
使用python实现名片管理系统
2020/06/18 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
Alba Moda瑞士网上商店：独家意大利时尚女装销售
2016/11/28 全球购物
英国知名奢侈品包包品牌：Milli Millu
2016/12/22 全球购物
销售总监工作职责
2013/11/21 职场文书
主办会计岗位职责
2014/03/13 职场文书
2015年五一劳动节演讲稿
2015/03/18 职场文书
实习护士自荐信
2015/03/25 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
Python作用域和名称空间的详细介绍
2022/04/13 Python