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 ...
随机推荐
- 洛谷P2320 [HNOI2006]鬼谷子的钱袋
https://www.luogu.org/problem/show?pid=2320#sub 题目描述全是图 数学思维,分治思想 假设总数为n 从n/2+1到n的数都可以用1~n的数+n/2表示出来 ...
- POJ1979 Red and Black
速刷一道DFS Description There is a rectangular room, covered with square tiles. Each tile is colored eit ...
- c++中string类型用下标初始化后str.size()为0 输出string值为空
你的string list是个默认构造函数,这样就没有为list分配空间,自然list[i]就会报出超出string范围的错误,可以简单更改为string list(6, '\0'),事先为list指 ...
- 了解 Nginx 基本概念
前言 本篇是我学习 Nginx 的一些笔记,主要内容讲述了一些了解 Nginx 需要的基本概念.然后探讨一下 Nginx 的模块化的组织架构,以及各个模块的分类.工作方式.职责和提供的相关指令. 主要 ...
- 如何通俗地理解 Gradle
http://www.zhihu.com/question/30432152 一句话概括就是:依赖管理和任务执行. 像Ruby里面的bundler+rake,像iOS中的cocoapods,像node ...
- Enum类型 枚举内部值/名
enum Days { Nothing=0, Mon=1, Stu=2 } static void Main(string[] args) { foreach (int item in Enum.Ge ...
- 修复VirtualBox "This kernel requires the following features not present on the CPU: pae Unable to boot
问题描述: 1.机器:Linux主机,特别是主机为大内存,比如: 4G内存的使用pae内核的Ubuntu系统的dell电脑. 2.情况:使用VirtualBox安装Linux系统时,比如:通过Virt ...
- 深入了解A*
一.前言 在这里我将对A*算法的实际应用进行一定的探讨,并且举一个有关A*算法在最短路径搜索的例子.值得注意的是这里并不对A*的基本的概念作介绍,如果你还对A*算法不清楚的话,请看姊妹篇<初识A ...
- CodeForces 701B Cells Not Under Attack
题目链接:http://codeforces.com/problemset/problem/701/B 题目大意: 输入一个数n,m, 生成n*n的矩阵,用户输入m个点的位置,该点会影响该行和该列,每 ...
- 锋利的jQuery-4--trigger()和triggerHandler()
trigger()方法触发事件后,会执行浏览器默认操作. $("input").trigger("focus") 以上的代码不仅会执行input绑定的focus ...