![](/img/trans.png)
[英]Adding editable infoboxes to Google Maps API v3 DrawingManager markers
[英]Google Maps API v3 save and reuse shape from drawingManager
我使用的是Google提供的Google Map API的示例之一。 在此示例中,我們可以使用繪圖庫在地圖上繪制一些線。
可以說我畫了一些東西。 那我怎么分享這個圖紙呢? 或保存以供以后參考?
下面是代碼
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 11,
// only show roadmap type of map, and disable ability to switch to other type
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON, ],
clickable: true,
draggable: true
},
polygonOtions: {
clickable: true,
draggable: true
}
});
drawingManager.setMap(map);
}
更新:
我正在嘗試Vadim的解決方案,但似乎有一個錯誤。 畫些東西然后刷新,您會看到
這是產生該錯誤的代碼:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
height:100%;
}
#map {
height: 100%;
}
.btn {
position:absolute;
width:50px;
height:60px;
top:5%;
left: 50%;
z-index:9999;
color:black;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing,geometry,places"></script>
</head>
<body>
<div class="btn" onclick="clearall(map);">delete</div>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 4,
// only show roadmap type of map, and disable ability to switch to other type
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
map.data.setControls(['Polygon']);
map.data.setStyle({
editable: true,
draggable: true
});
map.data.addListener('addfeature', savePolygon);
map.data.addListener('removefeature', savePolygon);
map.data.addListener('setgeometry', savePolygon);
//load saved data
loadPolygons(map);
}
function loadPolygons(map) {
var data = JSON.parse(sessionStorage.getItem('geoData'));
// map.data.forEach(function (f) {
// map.data.remove(f);
// });
map.data.addGeoJson(data)
}
function savePolygon() {
map.data.toGeoJson(function (json) {
// console.log(JSON.stringify(json));
sessionStorage.setItem('geoData', JSON.stringify(json));
});
}
function clearall(map){
map.data.forEach(function (f) {
map.data.remove(f);
});
}
initMap();
</script>
</body>
</html>
為此,您可以利用Google Maps Data層 。 以下示例演示了如何使用google.maps.Data
類將多邊形作為GeoJSON數據導出和導入。 localStorage用於存儲GeoJSON數據。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -34.397, lng: 150.644 },
zoom: 4,
// only show roadmap type of map, and disable ability to switch to other type
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
map.data.setControls(['Polygon']);
map.data.setStyle({
editable: true,
draggable: true
});
bindDataLayerListeners(map.data);
//load saved data
loadPolygons(map);
}
// Apply listeners to refresh the GeoJson display on a given data layer.
function bindDataLayerListeners(dataLayer) {
dataLayer.addListener('addfeature', savePolygon);
dataLayer.addListener('removefeature', savePolygon);
dataLayer.addListener('setgeometry', savePolygon);
}
function loadPolygons(map) {
var data = JSON.parse(localStorage.getItem('geoData'));
map.data.forEach(function (f) {
map.data.remove(f);
});
map.data.addGeoJson(data)
}
function savePolygon() {
map.data.toGeoJson(function (json) {
localStorage.setItem('geoData', JSON.stringify(json));
});
}
更新資料
以下演示演示了如何刪除多邊形。
您可以使用overlaycomplete
事件從繪制的多邊形中檢索路徑:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
// Get overlay paths
var paths = event.overlay.getPaths();
});
可重新使用paths
對象以從頭開始創建多邊形。 請參見下面的演示。 觸發overlaycomplete
事件時,請從疊加層獲取路徑,並使用它創建一個新的多邊形。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.