想为谷歌地图创建地理围栏。如何在地图上绘制选择地理围栏？答案

【问题标题】：Want to create a geofence for google map. How to draw on the map to select geofence?想为谷歌地图创建地理围栏。如何在地图上绘制选择地理围栏？
【发布时间】：2015-10-12 09:09:05
【问题描述】：

我一直致力于在谷歌地图中创建地理围栏。我创建了一个表单，用户可以在其中输入纬度和经度。现在我想在地图中显示特定的选定部分。一旦用户输入值并按下“创建地理围栏”，它应该在地图上显示给定的范围。在表格上输入纬度和经度值后，请帮助我在地图上创建地理围栏。

Below is the link of JSFiddle for geofence. 

http://jsfiddle.net/h0abau2q/

【问题讨论】：

标签： javascript google-maps google-maps-api-3 geofencing

【解决方案1】：

试试下面的代码（别忘了在 HTML 中编辑 YOUR_API_KEY）：

var myOptions = {
  zoom: 11,
  center: new google.maps.LatLng(36.236797, -112.956333),
  disableDefaultUI: true,
  mapTypeId: 'terrain'
}

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

var drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: google.maps.drawing.OverlayType.CIRCLE,
  drawingControl: true,
  drawingControlOptions: {
    drawingModes: [
      google.maps.drawing.OverlayType.CIRCLE
    ]
  },
  circleOptions: {
    fillColor: '#ffff00',
    fillOpacity: 1,
    strokeWeight: 5,
    clickable: false,
    editable: true,
    zIndex: 1
  }
});
drawingManager.setMap(map);


google.maps.event.addDomListener(map, 'tilesloaded', function() {
  if ($('#newPos').length == 0) {
    $('div.gmnoprint').last().wrap('<div id="newPos" />');
    $('div.gmnoprint').fadeIn(500);
  }
});

var setPos = function() {
  google.maps.event.trigger(map, 'tilesloaded');
};

window.setTimeout(setPos, 1000);

#map {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}

#logo {

  position: absolute;
  padding: 10px;
  width: 200px;
  font-size: 24px;
  background-color: rgba(255, 255, 255, 0.9);
  left: 50%;
  margin: 20px 0 0 -100px;
  text-align: center;
}

#newPos {
  position: absolute;
  left: 50%;
  margin: 14px 0 0 -135px;
}

.gmnoprint {
  display: none;
}

<!DOCTYPE html>
<html>
<body>

<h1>Google Map</h1>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing"></script>
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

<div id="map"></div>

</body>
</html>

【讨论】：

帮助很大。谢谢。