1. 谷歌地图的infowindow 不提供官方的定制化
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5.   <head>
  6.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  7.     <meta charset="utf-8">
  8.     <title>谷歌地图城市文字标签</title>
  9.     <style>
  10.       /* Always set the map height explicitly to define the size of the div
  11.        * element that contains the map. */
  12.       #map {
  13.         height: 100%;
  14.       }
  15.       /* Optional: Makes the sample page fill the window. */
  16.       html, body {
  17.         height: 100%;
  18.         margin: 0;
  19.         padding: 0;
  20.       }
  21.  
  22.       /* The location pointed to by the popup tip. */
  23.       .popup-tip-anchor {
  24.         height: 0;
  25.         position: absolute;
  26.         /* The max width of the info window. */
  27.         width: 200px;
  28.       }
  29.       /* The bubble is anchored above the tip. */
  30.       .popup-bubble-anchor {
  31.         position: absolute;
  32.         width: 100%;
  33.         bottom: /* TIP_HEIGHT= */ 8px;
  34.         left: 0;
  35.       }
  36.       /* Draw the tip. */
  37.       .popup-bubble-anchor::after {
  38.         content: "";
  39.         position: absolute;
  40.         top: 0;
  41.         left: 0;
  42.         /* Center the tip horizontally. */
  43.         transform: translate(-50%, 0);
  44.         /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
  45.         width: 0;
  46.         height: 0;
  47.         /* The tip is 8px high, and 12px wide. */
  48.         border-left: 6px solid transparent;
  49.         border-right: 6px solid transparent;
  50.         border-top: /* TIP_HEIGHT= */ 8px solid white;
  51.       }
  52.       /* The popup bubble itself. */
  53.       .popup-bubble-content {
  54.         position: absolute;
  55.         top: 0;
  56.         left: 0;
  57.         transform: translate(-50%, -100%);
  58.         /* Style the info window. */
  59.         background-color: white;
  60.         padding: 5px;
  61.         border-radius: 5px;
  62.         font-family: sans-serif;
  63.         overflow-y: auto;
  64.         max-height: 60px;
  65.         box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5);
  66.       }
  67.     </style>
  68.   </head>
  69.   <body>
  70.     <div id="map"></div>
  71.  
  72.     <script>
  73. var map, popup, Popup;
  74.  
  75. /** Initializes the map and the custom popup. */
  76. function initMap() {
  77.   definePopupClass();
  78.  
  79.   map = new google.maps.Map(document.getElementById('map'), {
  80.     center: {lat: 32.07226, lng: 118.78173},
  81.     zoom: 10,
  82.   });
  83.  
  84.   // popup = new Popup(new google.maps.LatLng(32.01923,118.78972),"我要显示的");
  85.   // popup.setMap(map);
  86.  
  87.   new Popup(new google.maps.LatLng(32.01923,118.78972),"城市1").setMap(map);
  88.   new Popup(new google.maps.LatLng(32.05911,118.78173),"城市2").setMap(map);
  89.  
  90. }
  91.  
  92. /** Defines the Popup class. */
  93. function definePopupClass() {
  94.   /**
  95.    * A customized popup on the map.
  96.    * @param {!google.maps.LatLng} position
  97.    * @param {!Element} content
  98.    * @constructor
  99.    * @extends {google.maps.OverlayView}
  100.    */
  101.   Popup = function(position, content1) {
  102.     this.position = position;
  103.     let content=document.createElement('div');
  104.     content.innerHTML="<b>"+content1+"</b>";
  105.  
  106.     content.classList.add('popup-bubble-content');
  107.  
  108.     var pixelOffset = document.createElement('div');
  109.     pixelOffset.classList.add('popup-bubble-anchor');
  110.     pixelOffset.appendChild(content);
  111.  
  112.     this.anchor = document.createElement('div');
  113.     this.anchor.classList.add('popup-tip-anchor');
  114.     this.anchor.appendChild(pixelOffset);
  115.  
  116.     // Optionally stop clicks, etc., from bubbling up to the map.
  117.     this.stopEventPropagation();
  118.   };
  119.   // NOTE: google.maps.OverlayView is only defined once the Maps API has
  120.   // loaded. That is why Popup is defined inside initMap().
  121.   Popup.prototype = Object.create(google.maps.OverlayView.prototype);
  122.  
  123.   /** Called when the popup is added to the map. */
  124.   Popup.prototype.onAdd = function() {
  125.     this.getPanes().floatPane.appendChild(this.anchor);
  126.   };
  127.  
  128.   /** Called when the popup is removed from the map. */
  129.   Popup.prototype.onRemove = function() {
  130.     if (this.anchor.parentElement) {
  131.       this.anchor.parentElement.removeChild(this.anchor);
  132.     }
  133.   };
  134.  
  135.   /** Called when the popup needs to draw itself. */
  136.   Popup.prototype.draw = function() {
  137.     var divPosition = this.getProjection().fromLatLngToDivPixel(this.position);
  138.     // Hide the popup when it is far out of view.
  139.     var display =
  140.         Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000 ?
  141.         'block' :
  142.         'none';
  143.  
  144.     if (display === 'block') {
  145.       this.anchor.style.left = divPosition.x + 'px';
  146.       this.anchor.style.top = divPosition.y + 'px';
  147.     }
  148.     if (this.anchor.style.display !== display) {
  149.       this.anchor.style.display = display;
  150.     }
  151.   };
  152.  
  153.   /** Stops clicks/drags from bubbling up to the map. */
  154.   Popup.prototype.stopEventPropagation = function() {
  155.     var anchor = this.anchor;
  156.     anchor.style.cursor = 'auto';
  157.  
  158.     ['click', 'dblclick', 'contextmenu', 'wheel', 'mousedown', 'touchstart',
  159.      'pointerdown']
  160.         .forEach(function(event) {
  161.           anchor.addEventListener(event, function(e) {
  162.             e.stopPropagation();
  163.           });
  164.         });
  165.   };
  166. }
  167.     </script>
  168.     <script async defer
  169.     src="http://maps.google.cn/maps/api/js?v=3&sensor=false&key=yourkey&hl=zh-CN&callback=initMap">
  170.     </script>
  171.   </body>
  172. </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. Mac 远程连接Linux服务器及上传、下载命令

    1.使用ssh命令连接远程服务器主机 1.不设置端口,默认就是22 ssh root@192.168.18.129 1.1.设置端口例: ssh -p 22 root@192.168.18.1292. ...

  2. 网站跳转到Apache 2 Test Page powered by CentOS

    原来是80端口被占用的问题 解决80端口占用问题 sudo fuser -n tcp -k 覆盖原来的httpd cp /usr/local/apache2/bin/apachectl /etc/in ...

  3. Linux 静态库(.a)转换为动态库(.so)

    Linux 静态库转换为动态库 参考 http://blog.csdn.net/moxuansheng/article/details/5812410 首先将.a文件转为.so文件是可以实现的 原因是 ...

  4. 新一代web框架Koa源码学习

    此文已由作者张佃鹏授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Koa 就是一种简单好用的 Web 框架.它的特点是优雅.简洁.表达力强.自由度高.本身代码只有1000多行 ...

  5. 【转】C#里partial关键字的作用

    源地址:http://www.cnblogs.com/OpenCoder/archive/2009/10/27/1590328.html

  6. 洛谷P4121 [WC2005]双面棋盘（线段树套并查集）

    传送门 先膜一下大佬->这里 据说这题正解是LCT,然而感觉还是线段树套并查集的更容易理解 我们对于行与行之间用线段树维护,每一行内用并查集暴力枚举 每一行内用并查集暴力枚举连通块这个应该容易理 ...

  7. uuid安装 插件安装

    yum -y install uuid uuid-devel 安装uuid包tar -zxvf uuid-1.6.1.tar.gzcd uuid-1.6.1./configuremakemake in ...

  8. springBoot2.0 配置shiro实现权限管理

    一.前言 基于上一篇springBoot2.0 配置 mybatis+mybatisPlus+redis 这一篇加入shiro实现权限管理 二.shiro介绍 2.1 功能特点 Shiro 包含 10 ...

  9. JSP-模拟银行卡账号密码登录页面跳转

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  10. C.0689-The 2019 ICPC China Shaanxi Provincial Programming Contest

    We call a string as a 0689-string if this string only consists of digits '0', '6', '8' and '9'. Give ...