Question

我一直在尝试获取这段代码，用于在地图上绘制一个区域的多边形，但是当我尝试使其与我显示我的地图的初始代码一致时它没有出现，这是在底部。我是一个很新的堆栈溢出，所以放轻松我们。

下面是我尝试使用我的初始代码的代码，它位于下面..

function initialize() {
 var mapCanvas = document.getElementById('map-canvas');

 var mapOptions = {
      center: new google.maps.LatLng(53.35720799587802, -6.306973099708557),


   mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var africanPlains;

  var map = new google.maps.Map(document.getElementById("map_canvas"),
  myOptions);

 var plainCoords = [
  new google.maps.LatLng(53.3571279554267, -6.311039328575134),
  new google.maps.LatLng(53.35742570514506, -6.311720609664917),
  new google.maps.LatLng(53.358523839347924, -6.310964226722717),
  new google.maps.LatLng(53.35879916885124, -6.310363411903381)
  new google.maps.LatLng(53.358350957122745, -6.309478282928467),
  new google.maps.LatLng(53.35821969422412, -6.309472918510437),
  new google.maps.LatLng(53.3581076402103, -6.309118866920471),
  new google.maps.LatLng(53.357460922716136, -6.308453679084778),
  new google.maps.LatLng(53.357150366768224, -6.310266852378845),

  ];

  // Construct the polygon
  africanPlains = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
  });

  africanPlains.setMap(map);

  // add an event listener
  google.maps.event.addDomListener(window, 'load', initialize);
 });

}

初始代码：....

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map-canvas {
        width: 400px;
        height: 500px;
  }
</style>

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize() {
    var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
      center: new google.maps.LatLng(53.35720799587802, -6.306973099708557),
      zoom: 16,

      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
      function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(53.35720799587802, -6.306973099708557),
      zoom: 16,
disableDefaultUI: true
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                            mapOptions)
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
 </head>
  <body>
   <div id="map-canvas"></div>
 </body>
 </html>

在地图中绘制多边形

0 个答案: