想要为谷歌地图创建地理围栏.如何在地图上绘制以选择地理围栏？

Question

我一直致力于在谷歌地图中创建地理围栏.我创建了一个用户可以放置纬度和经度的表单.现在我想在地图中显示特定的选定部分.一旦用户输入值并按"创建地理围栏",它应该在地图上显示给定的范围.在将经度和纬度值放在表单上之后,请帮我在地图上创建地理围栏.

Below is the link of JSFiddle for geofence. 

http://jsfiddle.net/h0abau2q/

Answer 1

这是html代码

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

这是css代码

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

这是javascript文件

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