原文地址

前面我们学习了地图和标记的创建。那么今天我们来学习怎样在地图上显示一个窗口（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的更多相关文章

  1. google maps js v3 api教程(1) -- 创建一个地图

    原文地址 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 在创建地图之前 ...

  2. google maps js v3 api教程(2) -- 在地图上添加标记

    原文链接 google maps javascript官方文档:https://developers.google.com/maps/documentation/javascript/ 我们在创建地图 ...

  3. Google Maps API V3 之 图层

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  4. Google Maps API显示地图的小示例

    来源:http://www.ido321.com/1089.html 效果(新版Firefox中测试): 代码: <!DOCTYPE> <html> <head> ...

  5. HTML5获取地理位置信息并在Google Maps上显示

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. 在Google Maps 上点击标签显示说明并保持不消失

    JS如下: (function() {     window.onload = function() {         // Creating an object literal containin ...

  7. 在Google Maps 上点击标签后显示说明

    JS如下: (function() {     window.onload = function() {           // Creating an object literal contain ...

  8. Google Maps API V3 之绘图库 信息窗口

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  9. Google Maps API V3 之 路线服务

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

随机推荐

  1. 解决：Angular-cli:执行ng-build --prod后，dist文件里无js文件、文件未压缩等问题

    Angular2.0于2016年9月上线,我于9月入坑. 入坑以来,一直让我很困惑的问题 1.angular-cli是个什么鬼东西? 2.为什么我们自己的资源文件还没写什么,就有起码50多个js文件加 ...

  2. SQL Server中,Numric,Decimal,Money三种字段类型的区别

    都是精确数据类型, 前两个可以自己定义长度和小数位数, Money的定义相当于Numric(19,4) numeric(10,2) 表示最大可以放10位数,但这10位数里有2位是小数如: 123456 ...

  3. 使用 Python 抓取欧洲足球联赛数据

    Web Scraping在大数据时代,一切都要用数据来说话,大数据处理的过程一般需要经过以下的几个步骤    数据的采集和获取    数据的清洗,抽取,变形和装载    数据的分析,探索和预测    ...

  4. 中国天气网-天气预报接口api

    中国天气网地址:http://www.weather.com.cn 请求服务 : 查询实时天气信息 http://www.weather.com.cn/data/sk/101110101.html 在 ...

  5. POJ3628 Bookshelf 2(01背包+dfs)

    Bookshelf 2 Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8745   Accepted: 3974 Descr ...

  6. Nagios页面介绍（四）

    四.nagios页面介绍 Nagios 4.0.8版本登录后图片

  7. Hibernate配置问题

    Hibernate是对持久化对象操作,生成SQL语句达到操作数据库目的. 1.Hibernate可以通过两种方式来配置 (1).hibernate.cfg.xml,在此文件里hibernate-con ...

  8. HttpResponse对象

    为了响应客户端的请求,同样定义了代表响应的类:HttpResponse类,它也定义在命名空间System.Web下,提供向客户端响应的方法和属性. HttpResponse常用属性和方法 响应对象用于 ...

  9. Unity3d与iOS交互开发——接入平台SDK必备技能

    原地址:http://www.2cto.com/kf/201401/273337.html# 前言废话:开发手机游戏都知道,你要接入各种平台的SDK.那就需要Unity3d与iOS中Objective ...

  10. [codeforces 241]A. Old Peykan

    [codeforces 241]A. Old Peykan 试题描述 There are n cities in the country where the Old Peykan lives. The ...