谷歌地图的infowindow 不提供官方的定制化

<!DOCTYPE html>

<html>

  <head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta charset="utf-8">

    <title>谷歌地图城市文字标签</title>

    <style>

      /* Always set the map height explicitly to define the size of the div

       * element that contains the map. */

      #map {

        height: 100%;

      }

      /* Optional: Makes the sample page fill the window. */

      html, body {

        height: 100%;

        margin: 0;

        padding: 0;

      }

      /* The location pointed to by the popup tip. */

      .popup-tip-anchor {

        height: 0;

        position: absolute;

        /* The max width of the info window. */

        width: 200px;

      }

      /* The bubble is anchored above the tip. */

      .popup-bubble-anchor {

        position: absolute;

        width: 100%;

        bottom: /* TIP_HEIGHT= */ 8px;

        left: 0;

      }

      /* Draw the tip. */

      .popup-bubble-anchor::after {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        /* Center the tip horizontally. */

        transform: translate(-50%, 0);

        /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */

        width: 0;

        height: 0;

        /* The tip is 8px high, and 12px wide. */

        border-left: 6px solid transparent;

        border-right: 6px solid transparent;

        border-top: /* TIP_HEIGHT= */ 8px solid white;

      }

      /* The popup bubble itself. */

      .popup-bubble-content {

        position: absolute;

        top: 0;

        left: 0;

        transform: translate(-50%, -100%);

        /* Style the info window. */

        background-color: white;

        padding: 5px;

        border-radius: 5px;

        font-family: sans-serif;

        overflow-y: auto;

        max-height: 60px;

        box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5);

      }

    </style>

  </head>

  <body>

    <div id="map"></div>

    <script>

var map, popup, Popup;

/** Initializes the map and the custom popup. */

function initMap() {

  definePopupClass();

  map = new google.maps.Map(document.getElementById('map'), {

    center: {lat: 32.07226, lng: 118.78173},

    zoom: 10,

  });

  // popup = new Popup(new google.maps.LatLng(32.01923,118.78972),"我要显示的");

  // popup.setMap(map);

  new Popup(new google.maps.LatLng(32.01923,118.78972),"城市1").setMap(map);

  new Popup(new google.maps.LatLng(32.05911,118.78173),"城市2").setMap(map);

}

/** Defines the Popup class. */

function definePopupClass() {

  /**

   * A customized popup on the map.

   * @param {!google.maps.LatLng} position

   * @param {!Element} content

   * @constructor

   * @extends {google.maps.OverlayView}

   */

  Popup = function(position, content1) {

    this.position = position;

    let content=document.createElement('div');

    content.innerHTML="<b>"+content1+"</b>";

    content.classList.add('popup-bubble-content');

    var pixelOffset = document.createElement('div');

    pixelOffset.classList.add('popup-bubble-anchor');

    pixelOffset.appendChild(content);

    this.anchor = document.createElement('div');

    this.anchor.classList.add('popup-tip-anchor');

    this.anchor.appendChild(pixelOffset);

    // Optionally stop clicks, etc., from bubbling up to the map.

    this.stopEventPropagation();

  };

  // NOTE: google.maps.OverlayView is only defined once the Maps API has

  // loaded. That is why Popup is defined inside initMap().

  Popup.prototype = Object.create(google.maps.OverlayView.prototype);

  /** Called when the popup is added to the map. */

  Popup.prototype.onAdd = function() {

    this.getPanes().floatPane.appendChild(this.anchor);

  };

  /** Called when the popup is removed from the map. */

  Popup.prototype.onRemove = function() {

    if (this.anchor.parentElement) {

      this.anchor.parentElement.removeChild(this.anchor);

    }

  };

  /** Called when the popup needs to draw itself. */

  Popup.prototype.draw = function() {

    var divPosition = this.getProjection().fromLatLngToDivPixel(this.position);

    // Hide the popup when it is far out of view.

    var display =

        Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000 ?

        'block' :

        'none';

    if (display === 'block') {

      this.anchor.style.left = divPosition.x + 'px';

      this.anchor.style.top = divPosition.y + 'px';

    }

    if (this.anchor.style.display !== display) {

      this.anchor.style.display = display;

    }

  };

  /** Stops clicks/drags from bubbling up to the map. */

  Popup.prototype.stopEventPropagation = function() {

    var anchor = this.anchor;

    anchor.style.cursor = 'auto';

    ['click', 'dblclick', 'contextmenu', 'wheel', 'mousedown', 'touchstart',

     'pointerdown']

        .forEach(function(event) {

          anchor.addEventListener(event, function(e) {

            e.stopPropagation();

          });

        });

  };

}

    </script>

    <script async defer

    src="http://maps.google.cn/maps/api/js?v=3&sensor=false&key=yourkey&hl=zh-CN&callback=initMap">

    </script>

  </body>

</html>

谷歌地图自定义popup框的更多相关文章

  1. Maplace.js – 小巧实用的 jQuery 谷歌地图插件

    Maplace.js是一个小的显示谷歌地图的 jQuery 插件,帮助你把谷歌地图嵌入到你的网站,快速在地图位置上创建标记和控制菜单.它需要 jQuery 和谷歌地图 API v3 支持,所以这两个都 ...

  2. Google Map Api 谷歌地图接口整理

    一:基本知识: 1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点: 1.假如使用 API 的页面还没有发布,只是在本地调试,可以不用密钥,随便用个字符串代替就可以了. ...

  3. 怎样基于谷歌地图的Server缓存公布Image Service服务

    怎样基于谷歌地图的Server缓存公布Image Service服务 第一步:下载地图数据 下载安装水经注万能地图下载器,启动时仅仅选择电子.谷歌(这里能够依据自己的须要选择).例如以下图所看到的. ...

  4. Qt之自定义检索框

    1.效果展示 今天这篇文章主要讲解的是自定义搜索框,不仅仅支持搜索,而且可以支持搜索预览,具体请看效果图1.网上也有一些比较简单明了的自定义搜索框,比如Qt之自定义搜索框,讲的也比较详细,不过本文的侧 ...

  5. vue3系列：vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

    基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...

  6. 结合谷歌地图多边形(polygon)与Sql Server 2008的空间数据类型计算某个点是否在多边形内的注意事项

    首先在利用 GEOGRAPHY::STPolyFromText(@GeoStr, 4326) 这样的函数把字符串转换为Geography类型时,字符串里经纬度的顺序是 “经度[空格]纬度”,即“lon ...

  7. .NET开发笔记（二十三） 谷歌地图下载

    关于如何将地球经纬度坐标系统转换成程序中常用到的平面2D坐标系统,网上的文章很多,参考http://www.cnblogs.com/beniao/archive/2010/04/18/1714544. ...

  8. 谷歌地图地理解析和反解析geocode.geocoder详解

    地址解析就是将地址(如:贵州省贵阳市)转换为地理坐标(如经度:106.71,纬度:26.57)的过程. 地理反解析和上面的过程相反是将地理坐标(如纬度:26.57,经度:106.71)转换为地址(中国 ...

  9. 基于谷歌地图的Dijkstra算法水路路径规划

    最终效果图如下: 还是图.邻接表,可以模拟出几个对象=>节点.边.路径.三个类分别如下: Node 节点: using System; using System.Collections.Gene ...

随机推荐

  1. SpringMvc之参数绑定注解详解之一

    引言: 前段时间项目中用到了REST风格来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没有加 任何注解),查看了提交方式为application/ ...

  2. 115个Java面试题和答案

    面向对象编程(OOP) Java是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改. 代码复用. 增强代码的可靠性和灵活性. 增加代码 ...

  3. Angular10 组件之间的通讯

    1 父组件和子组件之间的通讯 2 利用中间组件实现两个组件之间的通讯 3 利用服务实现两个组件之间的通讯 2017年8月26日20:09:13 待更新... 1 组件之间的关系图 1.1 父子关系 1 ...

  4. 使用Meshlab软件将点云（Point Cloud）转换为模型（Mesh）

    使用Meshlab软件将点云(Point Cloud)转换为模型(Mesh) 启动Meshlab软件: 导入.ply点云文件: 接着点击: 弹出一个右侧边栏: 接着,计算每个点的法线: 输入100,点 ...

  5. centos MAC 地址与报错eth0 unknown interface no such device

    eth0 unknown interface no such device 出现这个原因是由于虚拟机直接COPY过来,MAC地址发生了变化,但eth0 里仍然记录着旧的MAC地址. 解决方法: vim ...

  6. 阶段2-新手上路\项目-移动物体监控系统\Sprint2-摄像头子系统开发\第2节-V4L2图像编程接口深度学习

    参考资料: http://www.cnblogs.com/emouse/archive/2013/03/04/2943243.htmlhttp://blog.csdn.net/eastmoon5021 ...

  7. adb devices unauthorized解决方法

    有时候使用adb连接手机时,即使打开了usb调试,手机添加了信任,仍然出现unauthorized的提示 解决办法如下: 先上两张stack overflow上面的图片: 很多人可能看不懂.翻一下大概 ...

  8. JavaScript学习系列3 -- JavaScript arguments对象学习

    在实际项目开发中,目前还是很少使用到JavaScript 中的arguments对象,那么它到底是干什么用的呢 arguments是JavaScript中的一个类数组对象,它代表传给一个正在执行的函数 ...

  9. 16.Tomcat弱口令 && 后台getshell漏洞

    Tomcat7+ 弱口令 && 后台getshell漏洞 Tomcat版本:8.0 环境说明 Tomcat支持在后台部署war文件,可以直接将webshell部署到web目录下.其中, ...

  10. 【mysql 统计分组之后统计录数条数】

    SELECT count(*) FROM 表名 WHERE 条件 // 这样查出来的是总记录条   SELECT count(*) FROM 表名 WHERE 条件 GROUP BY id //这样统 ...