google maps js v3 api教程(3) -- 创建infowindow
前面我们学习了地图和标记的创建。那么今天我们来学习怎样在地图上显示一个窗口（infowindow）
infowindow构造函数为：InfoWindow(opts?:InfoWindowOptions)。
InfoWindowOptions对象指定用于显示信息窗口的初始化参数。
InfoWindowOptions对象属性：
content：包含一个文本字符串或信息窗口中显示DOM节点。
pixelOffset：表示信息窗口的位置偏移。
position：infowindow显示的位置（经纬度）。
maxWidth：指定的像素信息窗口的最大宽度。
下面我们来创建一个infowindow：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script> // 初始化地图
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
}); //infowindow要显示的内容
var contentString = "this is a infowindow!" //定义infowindow
var infowindow = new google.maps.InfoWindow({
content: contentString
}); //定义marker
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
//为marker添加一个点击事件的监听函数（即点即marker后将infowindow显示出来）
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
以上就是创建infowindow的代码，当我们点击地图上的marker时，infowindow就显示出来了！
当我们想改变infowindow的内容时，我们可以使用 "infowindow.setContent("要改变的内容");"来改变infowindow的内容，同时我们也可以使用infowindow.getContent()来获取infowindow的内容。
google maps js v3 api教程(3) -- 创建infowindow的更多相关文章
- google maps js v3 api教程(1) -- 创建一个地图
原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前 ...
- google maps js v3 api教程(2) -- 在地图上添加标记
原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...
- Google Maps API V3 之 图层
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google Maps API显示地图的小示例
来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...
- HTML5获取地理位置信息并在Google Maps上显示
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 在Google Maps 上点击标签显示说明并保持不消失
JS如下: (function() { window.onload = function() { // Creating an object literal containin ...
- 在Google Maps 上点击标签后显示说明
JS如下: (function() { window.onload = function() { // Creating an object literal contain ...
- Google Maps API V3 之绘图库 信息窗口
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
- Google Maps API V3 之 路线服务
Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...
随机推荐
- spring获取ApplicationContext对象的方法——ApplicationContextAware
一. 引言 工作之余,在看一下当年学的spring时,感觉我们以前都是通过get~ set~方法去取spring的Ioc取bean,今天就想能不能换种模型呢?因为我们在整合s2sh时,也许有那么一天就 ...
- HYSBZ 4197 寿司晚宴
Description 为了庆祝 NOI 的成功开幕,主办方为大家准备了一场寿司晚宴.小 G 和小 W 作为参加 NOI 的选手,也被邀请参加了寿司晚宴. 在晚宴上,主办方为大家提供了 n−1 种不同 ...
- Win7 + ubuntu14.04 双系统
安装主要分为以下几步:一． 下载Ubuntu 14.04镜像软件:二． 制作U盘启动盘:三． 安装Ubuntu系统:四． 用EasyBCD 创建启动系统. 1. 下载 Ubuntu 14.04 直接到 ...
- Spring MVC 读取静态资源时404错误
背景:web.xml配置时拦截策略是拦截所有请求: <servlet> <servlet-name>springmvc</servlet-name> <ser ...
- ON THE EVOLUTION OF MACHINE LEARNING: FROM LINEAR MODELS TO NEURAL NETWORKS
ON THE EVOLUTION OF MACHINE LEARNING: FROM LINEAR MODELS TO NEURAL NETWORKS We recently interviewed ...
- SQL语句修改表字段名/修改字段长度/增加字段/删除字段
修改字段名Exec sp_rename 'zxchem_Suggest.End_Date','Yj_Finish_Date','Column' 修改字段长度Alter Table zxchem_Sug ...
- app 后端技术
app 后端技术 一直以来工作的方向是web server,对app server没有什么了解.虽然没有接触过移动app开发,但对app后端技术还是挺有探索欲望的,app应用和web应用在前端的用户习 ...
- liunx几台机器直接用ssh链接
1,查看ip sudo ifconfig 2,查看是否安装了ssh server服务 ps -ef |grep ssh 或者ps -aux |grep ssh 看一下里面有没有sshd.如果没有表示 ...
- 利用sourcemap来调试sass
最近项目用上了sass,作为css的预处理器,它可以让我们用程序化的思维书写样式,极大的简化了css的开发,实在是前端居家旅行必备的利器. 我们都知道,在项目中,样式的频繁调试是不可避免的,用上sas ...
- POJ 3349 Snowflake Snow Snowflakes
Snowflake Snow Snowflakes Time Limit: 4000MS Memory Limit: 65536K Total Submissions: 27598 Accepted: ...