自定义谷歌地图折线

custom google map polyline

本文关键字：折线 谷歌地图 自定义      更新时间：2023-09-26

我有一个功能自定义的谷歌地图，作为我正在构建的演示网站上页面的背景运行。地图及其包含的div的代码如下：

    <div id="fullBG" style="')" ><script>
function initMap() {
  var customMapType = new google.maps.StyledMapType([
  {
    "featureType": "administrative.province",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape.man_made",
    "stylers": [
      { "visibility": "off" }
    ]
  },
{
      }
], {
      name: 'Custom Style'
  });
  var customMapTypeId = 'custom_style';
  var map = new google.maps.Map(document.getElementById('fullBG'), {
    zoom: 4, 
    center: {lat: 46.902983, lng: -41.742671},
    streetViewControl: false,
    mapTypeControlOptions: {
    mapTypeIds: []
    }
  });
 map.mapTypes.set(customMapTypeId, customMapType);
  map.setMapTypeId(customMapTypeId);
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=[my API key]&signed_in=false&callback=initMap"
        async defer></script></div>

我正试图添加一条简单的折线，正如谷歌上的开发者页面所建议的那样，代码如下：

var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  flightPath.setMap(map);
}

我试过在地图代码的不同位置粘贴多段线代码，但我无法使其工作。我也尝试过更改一些变量，但再次都无济于事。

这让我感到沮丧，并意识到我需要学习更多的基础知识，而不是试图拼凑出一个解决方案，但与此同时，如果有人能就如何添加这一行提供建议，我将不胜感激！

我已经和你玩了一些代码。。

这似乎可以

<!DOCTYPE html>
  <html>
    <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
      <meta charset="utf-8">
      <title>Simple Polygon</title>
      <style>
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        #map, #fullBG {
          height: 100%;
        }
      </style>
    </head>
    <body>
<div id="fullBG"  ></div>
  <script>
    function initMap() {
      var customMapType = new google.maps.StyledMapType([
      {
        "featureType": "administrative.province",
        "stylers": [
          { "visibility": "off" }
        ]
      },{
        "featureType": "landscape.man_made",
        "stylers": [
          { "visibility": "off" }
        ]
      },
    {
          }
    ], {
          name: 'Custom Style'
      });

      var customMapTypeId = 'custom_style';
      var map = new google.maps.Map(document.getElementById('fullBG'), {
        zoom: 4, 
        center: {lat: 46.902983, lng: -41.742671},
        streetViewControl: false,
        mapTypeControlOptions: {
        mapTypeIds: []
        }
      });
      map.mapTypes.set(customMapTypeId, customMapType);
      map.setMapTypeId(customMapTypeId);
      var flightPlanCoordinates = [
          {lat: 37.772, lng: -122.214},
          {lat: 21.291, lng: -157.821},
          {lat: -18.142, lng: 178.431},
          {lat: -27.467, lng: 153.027}
        ];
        var flightPath = new google.maps.Polyline({
          path: flightPlanCoordinates,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });
        flightPath.setMap(map);
    }
  </script>
  <script async defer
          src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
    </body>
  </html>

我发现有四个错误

  • 谷歌api密钥设置不正确
  • mapdiv中的脚本
  • fullBGdiv中的样式未正确设置
  • 和未设置的mapdiv的大小
相关文章：