Maps 在地图中绘制多边形_Maps_Geocoding_Polygons

Maps 在地图中绘制多边形

maps

Maps 在地图中绘制多边形,maps,geocoding,polygons,Maps,Geocoding,Polygons,我一直在尝试获取这段代码，它是用来在我的地图上绘制一个区域的多边形，但当我尝试使其工作时，它没有出现，与我的初始代码一致，它显示了我的地图，它位于底部。我对堆栈溢出非常陌生，所以请大家放松下面是我尝试使用我的初始代码的代码，如下 function initialize() { var mapCanvas = document.getElementById('map-canvas'); var mapOptions = { center: new google.maps.Lat

我一直在尝试获取这段代码，它是用来在我的地图上绘制一个区域的多边形，但当我尝试使其工作时，它没有出现，与我的初始代码一致，它显示了我的地图，它位于底部。我对堆栈溢出非常陌生，所以请大家放松

下面是我尝试使用我的初始代码的代码，如下

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>


#地图画布{
宽度：400px；
高度：500px；
}
函数初始化（）{
var mapCanvas=document.getElementById（'map-canvas'）；
变量映射选项={
中心：新的google.maps.LatLng（53.35720799587802，-6.30697309708557），
缩放：16，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（mapCanvas，mapOptions）
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
函数初始化（）{
变量映射选项={
中心：新的google.maps.LatLng（53.35720799587802，-6.30697309708557），
缩放：16，
disableDefaultUI:true
}
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

您介意在JSFIDLE中链接吗？