我想将Google Maps与绘图模式使用。
这是我的视图代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Polygon Arrays</title>
<link rel="stylesheet" type="text/css" href="assets/css/sitecss">
</head>
<body>
<div id="map">
<div id="mapDiv" class="map"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="assets/js/test.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=**********&callback=initMap&libraries=drawing" ></script>
</body>
</html>
我需要添加绘图模式到映射,这是我的脚本
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: 'terrain'
});
var mapDiv = map.getDiv();
map.setOptions({
fullscreenControl: true,
scaleControl: true
});
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControlOptions: {
drawingModes: [
google.maps.drawing.OverlayType.RECTANGLE,
google.maps.drawing.OverlayType.POLYGON
]
},
polygonOptions: {
fillColor: 'green',
fillOpacity: 0.4,
strokeWeight: 1,
clickable: true,
zIndex: 1,
editable: false
}
});
它上传地图,都可以。但是我看不到地图上的绘图面板。在开发控制台中,我没有错误。我的问题在哪里?
我想您忘记了在地图上添加绘图管理器,请尝试在代码末尾添加此图:
drawingManager.setMap(map);