原文地址

前面我们学习了地图和标记的创建。那么今天我们来学习怎样在地图上显示一个窗口（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. BZOJ1968 [Ahoi2005]COMMON 约数研究

    Description Input 只有一行一个整数 N(0 < N < 1000000). Output 只有一行输出,为整数M,即f(1)到f(N)的累加和. Sample Input ...

  2. windows ubuntu双系统启动

    开始安装系统 1.安装系统 首先安装windows8和ubuntu12.04,安装先后顺序可以不用管,只是安装到ubuntu的分区时需要注意device for boot loader install ...

  3. ecshop后台admin路径怎么修改

    ecshop后台admin路径怎么修改 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2013-03-25   ecshop如何修改后台admin路径? 大家都知道ec ...

  4. MySQL索引的创建、删除和查看

    MySQL索引的创建.删除和查看 此文转自http://blogold.chinaunix.net/u3/93470/showart_2001536.html 1．索引作用 在索引列上,除了上面提到的 ...

  5. java 打包过程及如何使用第三方jar包

    地址:http://wenku.baidu.com/view/44a1bbed81c758f5f61f6779.html或者 http://wenku.it168.com/d_000575231.sh ...

  6. webexam项目杂记

    sql 语句 数据库 本身 有数据类型的区分,对于mysql的字符串默认的用单引号''来表示,因此,整个sql 语句就要用双引号来括. 如: $sql = "SELECT * FROM us ...

  7. Linux下scp命令使用

    linux下scp命令主要是用来远程拷贝文件,下面介绍两种使用方法 1,拷贝本机文件到远程文件 举例子:把我本地的change目录下的changeFile.txt上传到远程192.168.2.88的k ...

  8. ABK （枚举）

    ABK Accepted : 24   Submit : 176 Time Limit : 1000 MS   Memory Limit : 65536 KB  题目描述 ABK是一个比A+B还要简单 ...

  9. Spring AOP使用整理：各种通知类型的介绍

    2.PersonImpl类的源码 public class PersonImpl implements Person { private String name; private int age; p ...

  10. Java修改数组长度

    java中没有关于修改数组长度的api,在此本人提供了修改数组长度的两个函数:arrayAddLength()和arrayReduceLength().详细见代码.  [java] view plai ...