Question

我有一个功能性自定义Google地图作为我正在构建的演示网站上的页面背景运行。地图的代码以及包含的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>

我试图按照Google上的开发人员网页的建议添加一条简单的折线，其代码如下：

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);
}

我已尝试在地图代码中的各个位置粘贴折线代码，但我无法使其工作。我也试过改变一些变量，但又无济于事。

这导致了沮丧和认识到我需要学习更多的基础知识，而不是试图将解决方案混合在一起，但与此同时，如果有人可以建议如何添加这条线，那我就是非常感谢！

Answer 1

我和你的代码玩了一点..

这似乎有用

<!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>

我发现了四个错误

google api密钥未正确设置
地图div中的脚本
你在fullBG div中正确设置的样式
并且未设置地图div的大小

自定义谷歌地图折线

1 个答案: