GoogleマップデータレイヤをHTMLテキストエリアに表示するにはどうすればよいですか?HTMLテキストエリアにGoogle Mapsデータレイヤを表示
ユーザーが描画ツールを使ってマップに加えた変更を保存する必要があります。
これは私がこれを達成するために行っていることです。ユーザーがクリックすると、そのユーザーが後で/編集マップを表示できるようにHTMLのテキストエリア内
- 表示Googleマップのデータ層が
- テキストエリアの「保存地図」コンテンツが データベースに保存されます。
私は既存のJSFiddleからコードを追加しました。 JSFiddleは2番目のマップを表示します。 GeoJSONデータを表示するだけの2番目のマップが必要です。
JSFiddle:
jsfiddle{dot}net/mikestratton/z988k7na/
function initialize() {
// Create a simple map.
map = new google.maps.Map(document.getElementsByTagName('TD')[0].firstChild, {
zoom: 9,
center: {
lat: 41,
lng: -81
},
disableDefaultUI: true
});
// test result
map2 = new google.maps.Map(document.getElementsByTagName('TD')[1].firstChild, {
zoom: map.getZoom(),
center: map.getCenter()
});
map2.bindTo('zoom', map, 'zoom');
map2.bindTo('center', map, 'center');
// END test result
map.data.setStyle(function(feature) {
if (feature.getProperty('radius') && feature.getGeometry().getType() === 'Point') {
return {
visible: false
};
}
return {
};
});\
// test result
map2.data.setStyle(function(feature) {
if (feature.getProperty('radius') && feature.getGeometry().getType() === 'Point') {
new google.maps.Circle({
map: map2,
center: feature.getGeometry().get(),
radius: feature.getProperty('radius')
});
return {
visible: false
};
}
return {
};
});
// END test result
map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
google.maps.event.addListenerOnce(map.data, 'addfeature', function() {
var btn = document.createElement('input');
btn.type = 'button';
btn.value = 'save data layer to test result';
google.maps.event.addDomListener(btn, 'click', function() {
map2.data.forEach(function(f) {
map2.data.remove(f);
});
map.getGeoJson(function(geo) {
console.log(map2.data.addGeoJson(geo));
});
});
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(btn);
});
var drawingManager = new google.maps.drawing.DrawingManager({
map: map,
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.RECTANGLE
]
}
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
switch (event.type) {
case google.maps.drawing.OverlayType.MARKER:
map.data.add(new google.maps.Data.Feature({
geometry: new google.maps.Data.Point(event.overlay.getPosition())
}));
break;
case google.maps.drawing.OverlayType.RECTANGLE:
var b = event.overlay.getBounds(),
p = [b.getSouthWest(), {
lat: b.getSouthWest().lat(),
lng: b.getNorthEast().lng()
}, b.getNorthEast(), {
lng: b.getSouthWest().lng(),
lat: b.getNorthEast().lat()
}]
map.data.add(new google.maps.Data.Feature({
geometry: new google.maps.Data.Polygon([p])
}));
break;
case google.maps.drawing.OverlayType.POLYGON:
map.data.add(new google.maps.Data.Feature({
geometry: new google.maps.Data.Polygon([event.overlay.getPath().getArray()])
}));
break;
case google.maps.drawing.OverlayType.POLYLINE:
map.data.add(new google.maps.Data.Feature({
geometry: new google.maps.Data.LineString(event.overlay.getPath().getArray())
}));
break;
case google.maps.drawing.OverlayType.CIRCLE:
map.data.add(new google.maps.Data.Feature({
properties: {
radius: event.overlay.getRadius()
},
geometry: new google.maps.Data.Point(event.overlay.getCenter())
}));
break;
}
});
}
google.maps.Map.prototype.getGeoJson = function(callback) {
var geo = {
"type": "FeatureCollection",
"features": []
},
fx = function(g, t) {
var that = [],
arr,
f = {
MultiLineString: 'LineString',
LineString: 'Point',
MultiPolygon: 'Polygon',
Polygon: 'LinearRing',
LinearRing: 'Point',
MultiPoint: 'Point'
};
switch (t) {
case 'Point':
g = (g.get) ? g.get() : g;
return ([g.lng(), g.lat()]);
break;
default:
arr = g.getArray();
for (var i = 0; i < arr.length; ++i) {
that.push(fx(arr[i], f[t]));
}
if (t == 'LinearRing' &&
that[0] !== that[that.length - 1]) {
that.push([that[0][0], that[0][1]]);
}
return that;
}
};
this.data.forEach(function(feature) {
var _feature = {
type: 'Feature',
properties: {}
}
_id = feature.getId(),
_geometry = feature.getGeometry(),
_type = _geometry.getType(),
_coordinates = fx(_geometry, _type);
_feature.geometry = {
type: _type,
coordinates: _coordinates
};
if (typeof _id === 'string') {
_feature.id = _id;
}
geo.features.push(_feature);
feature.forEachProperty(function(v, k) {
_feature.properties[k] = v;
});
});
if (typeof callback === 'function') {
callback(geo);
}
return geo;
}
google.maps.event.addDomListener(window, 'load', initialize);
既存のコードはどのように見えますか? (データレイヤー(https://developers.google.com/maps/documentation/javascript/reference#Data) '.toGeoJson()'メソッドを使用してみましたか?その説明は「コレクションの機能をGeoJSONオブジェクトにエクスポートする」 – geocodezip
私の質問に答えました。データレイヤーを使用する必要があります.toGeoJson –