原文地址

前面我们学习了地图和标记的创建。那么今天我们来学习怎样在地图上显示一个窗口（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. BZOJ-1305 dance跳舞 建图+最大流+二分判定

    跟随YveH的脚步又做了道网络流...%%% 1305: [CQOI2009]dance跳舞 Time Limit: 5 Sec Memory Limit: 162 MB Submit: 2119 S ...

  2. NOI题库--图论 宗教信仰

    1526:宗教信仰 总时间限制: 5000ms 内存限制: 65536kB 描述 世界上有许多宗教,你感兴趣的是你学校里的同学信仰多少种宗教. 你的学校有n名学生(0 < n <= 500 ...

  3. Docker Architecture、Docker Usage

    目录 . 引言 - 为什么要有Docker技术 . Docker简介 . Docker安装.部署.使用 . Docker安全 . Docker底层实现 . Docker网络配置 . Dockerfil ...

  4. MyEclipse------executeBatch()使用方法

    executeBatch()方法用于成批地执行SQL语句,但不能执行返回值是ResultSet结果集的SQL语句,而是直接执行stmt.executeBatch(); 辅助方法: addBatch() ...

  5. Jsonp简单认识(后端使用的是asp.net mvc)

    一.Jsonp简介:由于浏览器基于安全有同源策略(同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性)机制,所以前端无法使用Ajax来获取来获取其他域名下返回的数据,而Jsonp可 ...

  6. dede5.7前台插入恶意JS代码

    这个问题应该很久了 最近发现有用这个的蠕虫,dede 前台提交友情链接 只用htmlspecialchars简单处理了一下 可以插入代码plus/flink_add.php 提交: 表单中提交 图片地 ...

  7. TCP,IP,HTTP,SOCKET区别和联系

    物理层-- 数据链路层-- 传输层--                       TCP协议 会话层-- 我 们在传输数据时,可以只使用(传输层)TCP/IP协议,但是那样的话,如 果没有应用层,便 ...

  8. RedHat linux配置yum本地资源

    今天安装个linux平台的oracle数据库,在oracle检测的时候发现有些系统补丁包没有安装,手动rpm安装报有些关联包也没有安装,想想如果一个一个rpm的话累死人了要,所以想起用yum来进行安装 ...

  9. ExtJS学习之路第三步：理解引擎之下,ExtJS4中的类

    写写就发现,有些代码不查查源头,不明白是怎么回事?搜到这篇文章觉得还是收益匪浅,更容易读懂代码. Classes in Ext JS 4: Under the hood Countdown to Ex ...

  10. 漫长Appium之路（一）——从黑苹果到虚拟机

    作为一名普普通通的实习生,我也开始习惯折腾一般的生活了.部门应该最近是要搞个iOS自动化测试工具,我从最开始说起吧. 应该是上上上周五.主管找到我,说要装一个黑苹果,要我尽快把黑苹果能支持的硬件配置给 ...