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 ...
随机推荐
- BZOJ1432 [ZJOI2009]Function
Description Input 一行两个整数n; k. Output 一行一个整数,表示n 个函数第k 层最少能由多少段组成. Sample Input 1 1 Sample Output 1 H ...
- ci默认控制器
默认控制器 前面提到,如果在请求中没有指明具体的控制器,CI将会把页面重定向到一个系统默认的页面.这个默认页面可以自己设定,它存放在如下地址:/system/application/config/ro ...
- 如何获取xcassets中LaunchImage图片
NSDictionary * dic = @{@"320x480" : @"LaunchImage-700", @"320x568" : @ ...
- JS 内部传参
- linux进程调度之 FIFO 和 RR 调度策略
转载 http://blog.chinaunix.net/uid-24774106-id-3379478.html linux进程调度之 FIFO 和 RR 调度策略 2012-10-19 18 ...
- python多线程备份MYSQL数据库并删除旧的备份。
#!/usr/bin/python # -*- coding=utf-8 -*- import time import os import datetime import threading from ...
- JavaScript实现全排列
<html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> ...
- SQLite常见警告
引言 在vs2012中使用sqlite时,总会出现一个警告,lz是完美型的人,看到一个警告,心里多少看着不舒服啊. 解决办法 警告内容: 所生成项目的处理器架构“MSIL”与引用“System.Dat ...
- oracle 编译中一个关于clntsh 库的一个 帖子 ，收藏！
oracle 编译中一个关于clntsh 库的一个 帖子 ,收藏! ------------------------------------------------------------------ ...
- PDP 有多种定义，具体哪一种还需研究！！！！
PDP (用户面进行隧道转发的信息的保存协议) 编辑 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 即PDP上下文,保存用户面进行隧道转发的所有信息,包括RNC/GGSN的 ...