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 ...
随机推荐
- 【心得&&体会】
★2016.1.1★ 很早就想写这样的一篇blog了,但一直没有抽空去实现,新的一年感觉应该有所改变,故深夜提笔(码字) NOIP卡掉和连续两次月考爆炸,这段时间确实心理不舒服,调节的也不是很到位,但 ...
- Matlab最短路径问题记录
利用graphshortestpath 可以求最短路径,具体用法参考MATLAB帮助 S=[1 1 2 2 3 3 4 4 4 4 5 6 6 7 8]; %起始节点向量 E=[2 3 5 4 4 6 ...
- maven运行javaWeb项目
首先从svn下载下来的maven项目,需要点击项目,然后import--->Existing Maven Projects->全选之后点next就转换成功了,然后 run as--> ...
- 使用Navicat V8.0创建数据库，外键出现错误ERROR 1005: Can’t create table (errno: 121)
ERROR 1005: Can't create table (errno: 121) errno 121 means a duplicate key error. Probably the tabl ...
- ExtJS入门教程02，form也可以很优雅
在上一篇<Extjs window 入门>中,我们已经看到了如何将一个form组件放到window中,今天我们来看看form的一些优雅的工作方式. 使用fieldDefaults,优雅的设 ...
- 慎用 Enum.GetHashCode()
公司里遗留下了相当多的 Enum.GetHashCode()来获取枚举值的代码 但是这会产生装箱行为的!!因为Enum是值类型,GetHashCode()是Object的方法,调用GetHashCod ...
- FileStream文件流的读取和写入（为以后聊天工具的设计基础）
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...
- 面向对象之集合ArrayList
using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...
- 5个常用Java代码混淆器 助你保护你的代码
[IT168 技术文档] 从事Java编程的人都知道,可以通过逆向工程反编译得到Java程序的源代码,这种反编译工具之一就是JAD.因此,为保护我们的劳动成果,尽可能给反编译人员制造障碍,我们可以使用 ...
- Struts2中基于Annotation的细粒度权限控制
Struts2中基于Annotation的细粒度权限控制 2009-10-19 14:25:53| 分类: Struts2 | 标签: |字号大中小 订阅 权限控制是保护系统安全运行很重要 ...