网站嵌入自定义 google 地图

最新推荐文章于 2024-04-23 09:56:11 发布

Arya Wang

最新推荐文章于 2024-04-23 09:56:11 发布

阅读量1.1k

点赞数 1

分类专栏： Google 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_38865642/article/details/129994918

版权

Google 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Q：想在页面上嵌入一个谷歌地图框架。而且可以在同一框架中自定义多个标记。如下：

在这里插入图片描述

A：这里有一个示例，说明如何向地图添加三个标记：

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple Markers Example</title>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Multiple Markers Example</h1>
    <div id="map"></div>
    <script>
      function initMap() {
        var locations = [
          ['Location 1', 40.7128, -74.0060],
          ['Location 2', 34.0522, -118.2437],
          ['Location 3', 51.5074, -0.1278]
        ];
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: new google.maps.LatLng(40.7128, -74.0060),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
  </body>
</html>

在此示例中，我们在以下坐标处添加三个标记：

纽约市：40.7128，-74.0060
洛杉矶：34.0522，-118.2437
伦敦：51.5074，-0.1278

我们还将初始缩放级别设置为 4，并将地图以纽约市为中心。

将“YOUR_API_KEY”替换为您自己的 Google Maps API 密钥。如果您没有 API 密钥，可以按照 Google Maps API 文档上的说明获取 API 密钥。

完成这些更改后，您应该能够将修改后的代码嵌入到您的网站中，并看到带有三个标记的地图。

Q：在infowindow中，想使用html代码让内容样式更丰富。

A：可以在 InfoWindow 内容中使用 HTML 代码来为内容添加更多样式和格式。下面是 InfoWindow 中包含 HTML 内容的修改代码示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple Markers Example</title>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Multiple Markers Example</h1>
    <div id="map"></div>
    <script>
      function initMap() {
        var locations = [
          ['Location 1', 40.7128, -74.0060],
          ['Location 2', 34.0522, -118.2437],
          ['Location 3', 51.5074, -0.1278]
        ];
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: new google.maps.LatLng(40.7128, -74.0060),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              var contentString = '<div style="color: #000; font-weight: bold;">' + locations[i][0] + '</div>' +
                                  '<div style="color: #888;">Latitude: ' + locations[i][1] + '</div>' +
                                  '<div style="color: #888;">Longitude: ' + locations[i][2] + '</div>';
              infowindow.setContent(contentString);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
  </body>
</html>

在此修改后的代码中，我们向 InfoWindow 内容添加了 HTML 标记和样式。我们将位置名称包装在一个 div 元素中，该元素具有粗体字重和黑色。我们还在单独的 div 灰色元素中添加了纬度和经度信息。

您可以修改 HTML 内容以添加您想要的任何其他样式或格式。同样，在将此代码嵌入您的网站之前，不要忘记将“YOUR_API_KEY”替换为您自己的 Google Maps API 密钥。

Q：将部分标记的颜色与其它标记区分开来。

在这里插入图片描述

A：为了将部分标记颜色与其他两个区分开来，可以使用 Marker 对象的 icon 属性自定义标记图标。以下是位置 3 带有紫色标记图标的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple Markers Example</title>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Multiple Markers Example</h1>
    <div id="map"></div>
    <script>
      function initMap() {
        var locations = [
          ['Location 1', 40.7128, -74.0060],
          ['Location 2', 34.0522, -118.2437],
          ['Location 3', 51.5074, -0.1278]
        ];
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: new google.maps.LatLng(40.7128, -74.0060),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < locations.length; i++) {
          var iconColor = i == 2 ? 'purple' : 'red';
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: {
              url: 'http://maps.google.com/mapfiles/ms/icons/' + iconColor + '-dot.png'
            }
          });
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              var contentString = '<div style="color: #000; font-weight: bold;">' + locations[i][0] + '</div>' +
                                  '<div style="color: #888;">Latitude: ' + locations[i][1] + '</div>' +
                                  '<div style="color: #888;">Longitude: ' + locations[i][2] + '</div>';
              infowindow.setContent(contentString);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
  </body>
</html>

在此修改后的代码中，我们添加了一个 iconColor 变量来确定标记图标的颜色。我们已将位置 3 设置为“紫色”，将其他两个位置设置为“红色”。我们还将 icon 属性添加到带有标记图标图像 URL 的 Marker 对象，这是我们基于 iconColor 变量动态构建的。

可以将 iconColor 变量修改为您喜欢的任何其他颜色。可以在 Google Maps JavaScript API 文档中找到可用颜色的列表。

Q：地图默认为卫星视图

在这里插入图片描述
A：要将默认地图类型设置为卫星视图，可以在 initMap() 函数中将 Map 对象的 mapTypeId 属性修改为 ‘SATELLITE’。下面是将默认地图类型设置为卫星视图的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple Markers Example</title>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h1>Multiple Markers Example</h1>
    <div id="map"></div>
    <script>
      function initMap() {
        var locations = [
          ['Location 1', 40.7128, -74.0060],
          ['Location 2', 34.0522, -118.2437],
          ['Location 3', 51.5074, -0.1278]
        ];
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: new google.maps.LatLng(40.7128, -74.0060),
          mapTypeId: google.maps.MapTypeId.SATELLITE // set map type to satellite
        });
        var infowindow = new google.maps.InfoWindow();
        var marker, i;
        for (i = 0; i < locations.length; i++) {
          var iconColor = i == 2 ? 'purple' : 'red';
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: {
              url: 'http://maps.google.com/mapfiles/ms/icons/' + iconColor + '-dot.png'
            }
          });
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              var contentString = '<div style="color: #000; font-weight: bold;">' + locations[i][0] + '</div>' +
                                  '<div style="color: #888;">Latitude: ' + locations[i][1] + '</div>' +
                                  '<div style="color: #888;">Longitude: ' + locations[i][2] + '</div>';
              infowindow.setContent(contentString);
              infowindow.open(map, marker);
            }
          })(marker, i));
        }
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
  </body>
</html>

在此修改后的代码中，我们将地图对象的 mapTypeId 属性设置为“SATELLITE”，以将默认地图类型设置为卫星视图。您可以将此属性修改为您喜欢的任何其他地图类型，例如混合视图的“HYBRID”或地形视图的“TERRAIN”。

Q：但是发现地图上所有的标注都没有了。

在这里插入图片描述
A：可以使用混合视图的“HYBRID”

Q：我需要为使用 google map api 付费吗？

A：Google Maps API 有免费使用限制，但超出此限制，您可能需要为额外使用付费。免费使用限制包括每月 28,000 次地图加载，这对于许多小型网站和应用程序来说应该足够了。

但是，如果您超出免费使用限制或需要额外的功能，例如实时路况数据或高级路由算法，您可能需要注册一个 Google Maps Platform 结算帐户并为额外使用付费。 Google Maps Platform 的定价取决于您提出的请求数量和您使用的服务。

您可以在 Google Cloud Platform 网站上找到有关 Google Maps API 的定价和使用限制的更多信息。在使用 API 之前仔细查看定价和使用条款非常重要，以确保您了解与之相关的成本和限制。

Q：这种免费使用是终身受限的吗？

A：Google Maps API 的免费使用限制不是终生限制，而是以月为周期。免费使用限制目前设置为每月 28,000 次地图加载，并在每个日历月的月初重置。

一旦超过免费使用限制，您可能需要为额外的使用付费。不过，Google 提供了免费试用期和每月赠金，以帮助新用户开始使用 Google Maps API。在免费试用期间，您可以免费使用 Google Maps API，但不超过一定的使用限制。

请务必仔细监控您对 Google Maps API 的使用情况并制定相应计划，以确保您保持在免费使用限制范围内并且不会产生意外费用。您还可以使用 Google Maps Platform 定价计算器来估算针对您的特定用例使用 API 的成本。

Q：免费试用期有多长？

A：Google Maps Platform 的免费试用期目前设定为 90 天。在此期间，您可以免费使用 Google Maps API，但不超过一定的使用限制。

免费试用包括 300 美元的免费积分，可用于支付超出免费使用限额的额外使用费用。但是，如果您在试用期结束前超过 300 美元的额度或免费使用限额，您可能需要为额外的使用付费。

在免费试用期间仔细监控您对 Google Maps API 的使用情况并制定相应计划以确保您保持在免费使用限制内并且不会产生意外费用非常重要。试用期结束后，您需要注册一个 Google Maps Platform 结算帐户，并在必要时支付额外使用费。

Q：免费试用期过后，相应的月度奖金是不是就没有了？

A：Google 为使用 Google Maps Platform 提供的每月赠金仅在您使用的前 12 个月内可用。此积分旨在帮助新用户开始使用该平台，并可用于支付超出免费使用限制的额外使用费用。

前 12 个月后，每月信用额度不再可用，超出免费限额的任何额外使用量都将向您收费。但是，免费使用限制本身保持不变，仍为每月 28,000 次地图加载，因此如果您保持在该限制范围内，则无需支付任何费用。

请务必仔细监控您对 Google Maps Platform 的使用情况并制定相应计划，以确保您保持在免费使用限制范围内并且不会产生意外费用。您还可以使用 Google Maps Platform 定价计算器来估算针对您的特定用例使用 API 的成本。

Arya Wang

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网站嵌入自定义 google 地图

A：这里有一个示例，说明如何向地图添加三个标记：在此示例中，我们在以下坐标处添加三个标记：我们还将初始缩放级别设置为 4，并将地图以纽约市为中心。将“YOUR_API_KEY”替换为您自己的 Google Maps API 密钥。如果您没有 API 密钥，可以按照 Google Maps API 文档上的说明获取 API 密钥。完成这些更改后，您应该能够将修改后的代码嵌入到您的网站中，并看到带有三个标记的地图。A：可以在 InfoWindow 内容中使用 HTML 代码来为内容添加更多样式和格式。下
复制链接

扫一扫