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 ...
随机推荐
- 【poj2546】 Circular Area
http://poj.org/problem?id=2546 (题目链接) 题意 求两圆的面积交 Solution 一道水题Wa死我了,肯定是昨晚搞太晚的缘故= =. 两圆的位置关系有5种,而这里要求 ...
- Linux System Reinforcement、Intrusion Detection Based On syslog
目录 ．文件系统及访问权限 . Linux Syslog . Linux日志审计 . 帐号安全管理 . 基础物理安全 . 系统编译环境安全 . 系统病毒.后门.rootkit安全 . 系统端口.服务安 ...
- POJ1703Find them, Catch them
Find them, Catch them Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 37722 Accepted: ...
- MySQL中concat函数
MySQL中concat函数使用方法:CONCAT(str1,str2,…) 返回结果为连接参数产生的字符串.如有任何一个参数为NULL ,则返回值为 NULL. 注意:如果所有参数均为非二进制字符串 ...
- --hdu 1050 Moving Tables(贪心)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1050 AC code: #include<stdio.h> #include<str ...
- 新浪微博客户端(31)-显示相册图片上的GIF标记
DJStatusPhotoView.h #import <UIKit/UIKit.h> @class DJPhoto; @interface DJStatusPhotoView : UII ...
- 下面将详细说明useradd与usermod 的参数及用法！
下面将详细说明useradd与usermod 的参数及用法! 说到这里要另外两句,关于linux下口令相关的文件存放位置说明/usr/bin/passwd 包含 passwd 命令. /etc/pas ...
- winscp私钥如何生成
问题1,我用SecureCRT 5.0的自带工具生成了密钥和公钥(分别是不带后缀名的密钥文件和.pub的公钥文件),传上服务器也可以正常使用. 但是我用其它一些客户端工具连接时需要的密钥文件是 ...
- jsp 变量和方法的声明 Java程序片 HTML注释 JSP注释
<%!...%> 声明变量和方法 <%!...%>之中的变量为JSP页面的成员变量,当多个线程访问本页面时,多个线程共享此变量. <%@ page contentType ...
- 微信发明人竟是他!也是WeChat/Line/WhatsApp的发明者
赵建文,很多人不知道他是谁:说到微信大家都耳熟能详吧?没错,他就是初始微信发明人,同时也是WeChat/Line/WhatsApp的发明者!正是他的专利<一种基于或囊括手机电话本的即时通讯方法和 ...