javascript - 谷歌地图中弹出信息框-6ren

javascript - 谷歌地图中弹出信息框

转载作者：行者123 更新时间：2023-12-03 09:56:36

我有以下代码，希望获得一些帮助，为每个自定义标记添加弹出信息框。目前，我可以在代码中设置每个标记的坐标，但我还想在单击标记后在弹出信息框中添加其他信息。我似乎无法让弹出信息框工作

<!DOCTYPE html>
<html>

<head>
  <title>Cycle Trails Map</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-    scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map_canvas {
      width: 100%;
      height: 1000px;
      background-color: #2D333C;
    }
    #legend {
      font-family: Helvetica;
      color: #FFD900;
      background: rgba(0, 0, 0, 0.6);
      padding: 25px;
      margin: 25px;
      border: 1px solid #FFD900;
    }
    #legend h3 {
      margin-top: 0;
    }
    #legend img {
      vertical-align: middle;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script>
    var map; // google map object
    var markers = []; // we well store the markers here 


    function initialize() {
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 6,
        center: new google.maps.LatLng(-41.269954, 174.225516),
        mapTypeId: google.maps.MapTypeId.TERRAIN,



        <!-- Let's style the map with custom colours and opacity -->	  

        styles: [{
          featureType: 'poi.business',
          elementType: ' labels.icon',
          stylers: [{
            visibility: 'on'
          }, {
            hue: '#ff00db'
          }, {
            lightness: 0
          }, {
            saturation: 0
          }]
        }]
      });



      <!-- create KML layer -->

      var myKmlOptions = {
        preserveViewport: true,
        suppressInfoWindows: true
      }

      var kmlLayer_1 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/final.kml", myKmlOptions);
      var kmlLayer_2 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/sep.kml", myKmlOptions);
      kmlLayer_1.setMap(map);
      kmlLayer_2.setMap(map);







      <!-- Asynchronous Loading -->
      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
          '&signed_in=true&callback=initialize';
        document.body.appendChild(script);
      }

      window.onload = loadScript;











      <!-- Let's create the legend -->


      var iconBase = 'https://i.imgur.com/';
      var icons = {
        travel: {
          name: 'AA Traveller office',
          icon: iconBase + '2BNbLmG.png'
        },
        isite: {
          name: 'I-Site',
          icon: iconBase + 'kx9a1sc.png'
        },

        accommodation: {
          name: 'Accommodation',
          icon: iconBase + 'BJ4o7ad.png'
        },

        camping: {
          name: 'Camping',
          icon: iconBase + 'EIcei8n.png'
        },


        food: {
          name: 'Food and Beverage',
          icon: iconBase + 'c5aaWcb.png'
        },


        toilets: {
          name: 'Toilets',
          icon: iconBase + 'ID2zzXg.png'
        },


        waters: {
          name: 'Drinking Water',
          icon: iconBase + '5u3yvH1.png'
        },


        todo: {
          name: 'Things to do',
          icon: iconBase + 'L3Z9xWv.png'
        },

        viewing: {
          name: 'Viewing points',
          icon: iconBase + 'DTf6oIp.png'
        }
      };
      <!-- Adding the markers now -->
      function addMarker(feature) {
        var marker = new google.maps.Marker({
          position: feature.position,
          icon: icons[feature.type].icon,
          map: map
        });
        markers.push({
          marker: marker,
          type: feature.type
        });
      }

      <!-- Add the legend locations -->


      var features = [
        <!-- AA Travel -->
        {
          position: new google.maps.LatLng(-36.750002, 174.729471),
          type: 'travel'
        },




        <!-- I Site -->
        {
          position: new google.maps.LatLng(-37.226583, 175.335536),
          type: 'isite'
        },





        <!-- Accommodation -->
        {
          position: new google.maps.LatLng(-36.807404, 175.144404),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-39.808155, 175.474612),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-41.776782, 171.504106),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-43.820004, 172.965288),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-44.626974, 169.317827),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-46.522343, 168.455400),
          type: 'accommodation'
        },





        <!-- Camping -->
        {
          position: new google.maps.LatLng(-36.556301, 174.693964),
          type: 'camping'
        },






        <!-- Food and Beverage -->
        {
          position: new google.maps.LatLng(-38.368372, 176.847826),
          type: 'food'
        },





        <!-- Water -->
        {
          position: new google.maps.LatLng(-39.241622, 174.782397),
          type: 'waters'
        },







        <!-- Things to do -->
        {
          position: new google.maps.LatLng(-40.339016, 176.298510),
          type: 'todo'
        },






        <!-- Toilets -->
        {
          position: new google.maps.LatLng(-42.788153, 172.497240),
          type: 'toilets'
        },

        {
          position: new google.maps.LatLng(-41.878568, 173.837572),
          type: 'toilets'
        },





        <!-- Viewing spots -->
        {
          position: new google.maps.LatLng(-43.890775, 171.838061),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-37.676004, 178.429858),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-39.278658, 173.763491),
          type: 'viewing'
        }

      ];

      for (var i = 0, feature; feature = features[i]; i++) {
        addMarker(feature);
      }

      var legend = document.getElementById('legend');
      var i = 0;
      for (var key in icons) {
        var type = icons[key];
        var name = type.name;
        var icon = type.icon;
        var div = document.createElement('div');
        div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \'' + key + '\')"><img src="' + icon + '"> ' + name;
        legend.appendChild(div);
        i++;
      }
      map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
    }

    function toggleType(elm, event, type) {
      var on = elm.checked;
      for (var i = 0; i < markers.length; i++) {
        if (markers[i].type == type) {
          markers[i].marker.setMap(on ? map : null);
        }
      }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map_canvas"></div>
  <div id="legend">
    <h3>Points of Interest</h3>
  </div>



</body>

</html>

最佳答案

您需要阅读以下内容:https://developers.google.com/maps/documentation/javascript/infowindows

以下步骤及评论:

构造一个 infoWindow 对象 new google.maps.InfoWindow()
在创建每个标记时，将单击事件绑定(bind)到该标记。至少将您通过闭包创建的标记传递给该回调。
回调将设置infoWindow的内容。您可能想要动态创建一个 html 字符串并将其发送到 setContent
回调将在点击的标记上打开 map 上的信息

<!DOCTYPE html>
<html>

<head>
  <title>Cycle Trails Map</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-    scalable=no">
  <meta charset="utf-8">
  <style>
    html,
    body,
    #map_canvas {
      width: 100%;
      height: 1000px;
      background-color: #2D333C;
    }
    #legend {
      font-family: Helvetica;
      color: #FFD900;
      background: rgba(0, 0, 0, 0.6);
      padding: 25px;
      margin: 25px;
      border: 1px solid #FFD900;
    }
    #legend h3 {
      margin-top: 0;
    }
    #legend img {
      vertical-align: middle;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js"></script>
  <script>
    var map; // google map object
    var markers = []; // we well store the markers here 


    function initialize() {
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 6,
        center: new google.maps.LatLng(-41.269954, 174.225516),
        mapTypeId: google.maps.MapTypeId.TERRAIN,



        <!-- Let's style the map with custom colours and opacity -->	  

        styles: [{
          featureType: 'poi.business',
          elementType: ' labels.icon',
          stylers: [{
            visibility: 'on'
          }, {
            hue: '#ff00db'
          }, {
            lightness: 0
          }, {
            saturation: 0
          }]
        }]
      });



      <!-- create KML layer -->

      var myKmlOptions = {
        preserveViewport: true,
        suppressInfoWindows: true
      }

      var kmlLayer_1 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/final.kml", myKmlOptions);
      var kmlLayer_2 = new google.maps.KmlLayer("http://private.aatravel.co.nz/accommodation/1038668/proof14/sep.kml", myKmlOptions);
      kmlLayer_1.setMap(map);
      kmlLayer_2.setMap(map);







      <!-- Asynchronous Loading -->
      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
          '&signed_in=true&callback=initialize';
        document.body.appendChild(script);
      }

      window.onload = loadScript;











      <!-- Let's create the legend -->


      var iconBase = 'https://i.imgur.com/';
      var icons = {
        travel: {
          name: 'AA Traveller office',
          icon: iconBase + '2BNbLmG.png'
        },
        isite: {
          name: 'I-Site',
          icon: iconBase + 'kx9a1sc.png'
        },

        accommodation: {
          name: 'Accommodation',
          icon: iconBase + 'BJ4o7ad.png'
        },

        camping: {
          name: 'Camping',
          icon: iconBase + 'EIcei8n.png'
        },


        food: {
          name: 'Food and Beverage',
          icon: iconBase + 'c5aaWcb.png'
        },


        toilets: {
          name: 'Toilets',
          icon: iconBase + 'ID2zzXg.png'
        },


        waters: {
          name: 'Drinking Water',
          icon: iconBase + '5u3yvH1.png'
        },


        todo: {
          name: 'Things to do',
          icon: iconBase + 'L3Z9xWv.png'
        },

        viewing: {
          name: 'Viewing points',
          icon: iconBase + 'DTf6oIp.png'
        }
      };
      // make one infoWindow
      var infoWindow = new google.maps.InfoWindow();
      <!-- Adding the markers now -->
      function addMarker(feature) {
        var marker = new google.maps.Marker({
          position: feature.position,
          icon: icons[feature.type].icon,
          map: map
        });
        // bind a to the marker
        google.maps.event.addListener(marker, 'click', function() {
            openInfoWindow(marker, feature) // pass in feature as closure
        });
        markers.push({
          marker: marker,
          type: feature.type
        });
      }

      // generic callback whenever an info window is clicked
      function openInfoWindow(marker, feature) {
         // i'm unsure of where you're data will come to populate the infoWindow, it could come from the `feature` object (the same thing that you used to create the marker)
         infoWindow.setContent('<h3>Type: ' + feature.type + '<h3>');
         infoWindow.open(map, marker); // open the infoWindow above the marker. the maps API will bind the close button click for you. 
      
      }

      <!-- Add the legend locations -->


      var features = [
        <!-- AA Travel -->
        {
          position: new google.maps.LatLng(-36.750002, 174.729471),
          type: 'travel'
        },




        <!-- I Site -->
        {
          position: new google.maps.LatLng(-37.226583, 175.335536),
          type: 'isite'
        },





        <!-- Accommodation -->
        {
          position: new google.maps.LatLng(-36.807404, 175.144404),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-39.808155, 175.474612),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-41.776782, 171.504106),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-43.820004, 172.965288),
          type: 'accommodation'
        },

        {
          position: new google.maps.LatLng(-44.626974, 169.317827),
          type: 'accommodation'
        },


        {
          position: new google.maps.LatLng(-46.522343, 168.455400),
          type: 'accommodation'
        },





        <!-- Camping -->
        {
          position: new google.maps.LatLng(-36.556301, 174.693964),
          type: 'camping'
        },






        <!-- Food and Beverage -->
        {
          position: new google.maps.LatLng(-38.368372, 176.847826),
          type: 'food'
        },





        <!-- Water -->
        {
          position: new google.maps.LatLng(-39.241622, 174.782397),
          type: 'waters'
        },







        <!-- Things to do -->
        {
          position: new google.maps.LatLng(-40.339016, 176.298510),
          type: 'todo'
        },






        <!-- Toilets -->
        {
          position: new google.maps.LatLng(-42.788153, 172.497240),
          type: 'toilets'
        },

        {
          position: new google.maps.LatLng(-41.878568, 173.837572),
          type: 'toilets'
        },





        <!-- Viewing spots -->
        {
          position: new google.maps.LatLng(-43.890775, 171.838061),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-37.676004, 178.429858),
          type: 'viewing'
        },

        {
          position: new google.maps.LatLng(-39.278658, 173.763491),
          type: 'viewing'
        }

      ];

      for (var i = 0, feature; feature = features[i]; i++) {
        addMarker(feature);
      }

      var legend = document.getElementById('legend');
      var i = 0;
      for (var key in icons) {
        var type = icons[key];
        var name = type.name;
        var icon = type.icon;
        var div = document.createElement('div');
        div.innerHTML = '<input checked="checked" type="checkbox" onchange="toggleType(this, event, \'' + key + '\')"><img src="' + icon + '"> ' + name;
        legend.appendChild(div);
        i++;
      }
      map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
    }

    function toggleType(elm, event, type) {
      var on = elm.checked;
      for (var i = 0; i < markers.length; i++) {
        if (markers[i].type == type) {
          markers[i].marker.setMap(on ? map : null);
        }
      }
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head>

<body>
  <div id="map_canvas"></div>
  <div id="legend">
    <h3>Points of Interest</h3>
  </div>



</body>

</html>

关于javascript - 谷歌地图中弹出信息框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30722035/

文章推荐： javascript - 同时搜索两个网站并将结果并排显示在一页上

文章推荐： javascript - Node.js 服务器端检查

文章推荐： javascript - Ajax PHP 返回空文件

node.js - Passport 谷歌 oauth2 与 Passport 谷歌 oauth20 包
这两个包看起来非常相似: http://www.passportjs.org/packages/passport-google-oauth2/ http://www.passportjs.org/pa
javascript - 谷歌、推特认证
我想在我的网站上添加通过 Google 和 Twitter 登录的按钮。我需要只使用应用程序的客户端而不是服务器端来完成此操作。但我没有找到任何 API。对于我发现的所有内容，我需要使用带有 key
javascript - 谷歌+网址分享
我使用此链接通过 google plus 共享我的页面。 https://plus.google.com/share?url=http%3A%2F%2Fexample.com%2Fcompany%2
Python 谷歌 API
我正在尝试学习 google API，并且我的经验是使用 Python，因此我尝试使用 google api python 客户端来访问一些 google 服务，但在构建服务对象时遇到错误。从 ap
indexing - 谷歌，还没有索引
在其实际的实时托管平台上构建实时站点的努力中，有没有办法告诉谷歌不要索引该网站？我发现了以下内容: http://support.google.com/webmasters/bin/answer.py
ios - 谷歌+登录SDK不工作
我正在开发一个 iOS 应用程序。当我运行用于 google+ 登录的程序时，在我点击允许访问按钮后，会显示此消息。 You've reached this page because we have
javascript - 谷歌+1按钮不起作用
我有一个非常复杂的网站，每个页面包含 11 个 js 文件。我最近添加了 google +1 按钮，代码如下: 这会正确显示 +1 按钮，直到我单击它。当我单击它时，出现此错误:https://
javascript 谷歌 API
我正在尝试使用 google API 创建一个 html 文件，以便在 google MAPS 上显示 KML 文件。这是 HTML 代码: function initMap() {
c++ - 谷歌/基准测试结果不一致
我是使用 Google Benchmark 的新手，在本地运行代码与在 Quick-Bench.com 上运行代码时，我收到了运行相同基准测试(下方)的不同结果，该基准测试使用 C++ 检索本地时间.
Ajax 内容索引，谷歌
我已按照 Google 网站上的说明通过添加以下元标记在我的 AngularJS 网站上启用 Ajax 抓取: 呈现的内容有一些链接，如: User 1 User 2 User 3 还有一些呈现动态
java - 谷歌 AppInvite
通过 Google 手册实现 Google AppInvite - link . 启动 Invite Activity 并在 LogCat 中获取下一步: E/AppInviteAgent: Get
谷歌 Go 的表现如何？
那么有人用过 Google 的 Go 吗？我想知道数学性能(例如触发器)与其他具有垃圾收集器的语言(如 Java 或 .NET)相比如何？有人调查过吗？最佳答案理论性能:纯 Go 程序的理论性能
stackdriver - 谷歌 stackdriver 缓慢
Stackdriver 测试我的网站启动速度慢我们使用 cloudflare 作为我们的站点 CDN 提供商。我们使用 stackdriver 从外部测试站点可用性，我们将时间检查间隔设置为 1 分
python - 谷歌 JAX 一维卷积神经网络
我正在尝试使用 stax.GeneralConv() ( https://jax.readthedocs.io/en/latest/_modules/jax/experimental/stax.htm
api - 谷歌 API 更改了来自谷歌金融的数据
我有一个从谷歌金融中提取日内数据的软件。但是，由于昨天 Google 更新了 API，所以软件报错了 Conversion from string HTML HEAD meta http-equiv=
php - 谷歌 oAuth : redirect_uri_mismatch
我们在尝试从 Google 获取 oAuth token 时遇到“redirect_uri_mismatch”错误: [client 127.0.0.1:49892] {\n "error" : "
recaptcha - 谷歌 reCAPTCHA 在中国
我的网站正在使用 Google reCAPTCHA 控件，但我听说它被阻止了中国，反正我看到有人报告说将 API 更改为 https://www.recaptcha.net在中国工作？ Anyone
wordpress - 谷歌 anchor 广告高度过大
背景 WordPress Google Adsense 谷歌自动插入 anchor 定广告 https://pptmon.com 问题如下图所示，主播广告的容器高度太大了! 如何调整高度？这是谷歌
python - 谷歌 Colab 未加载
我在使用 Google Colab 时遇到问题。当我想制作一个新的 Python3 Notebook 时，由于我登录了我的 Google 帐户，因此无法加载刚刚打开的新页面。我该怎么办？感谢您的帮
express - 谷歌 Passport 回调后设置cookie
我正在使用 facebook和 google oauth2使用 passport js 登录, 有了这个流用户点击登录按钮重定向到 facebook/google auth 页面(取决于用户选择的

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 谷歌地图中弹出信息框