我已经阅读了一些关于此事的帖子,其中包含指向 examples 的链接。
但是我发现很难理解他们在示例中是如何做到的:
var gmap = new google.maps.Map(document.getElementById('gmap'), {
disableDefaultUI: true,
keyboardShortcuts: false,
draggable: false,
disableDoubleClickZoom: true,
scrollwheel: false,
streetViewControl: false
});
var view = new ol.View({
// make sure the view doesn't go beyond the 22 zoom levels of Google Maps
maxZoom: 21
});
view.on('change:center', function() {
var center = ol.proj.transform(view.getCenter(), 'EPSG:3857', 'EPSG:4326');
gmap.setCenter(new google.maps.LatLng(center[1], center[0]));
});
view.on('change:resolution', function() {
gmap.setZoom(view.getZoom());
});
var vector = new ol.layer.Vector({
source: new ol.source.GeoJSON({
url: 'data/geojson/countries.geojson',
projection: 'EPSG:3857'
}),
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.6)'
}),
stroke: new ol.style.Stroke({
color: '#319FD3',
width: 1
})
})
});
var olMapDiv = document.getElementById('olmap');
var map = new ol.Map({
layers: [vector],
interactions: ol.interaction.defaults({
altShiftDragRotate: false,
dragPan: false,
rotate: false
}).extend([new ol.interaction.DragPan({kinetic: null})]),
target: olMapDiv,
view: view
});
view.setCenter([0, 0]);
view.setZoom(1);
olMapDiv.parentNode.removeChild(olMapDiv);
gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olMapDiv);
我必须创建多少个 DOM 元素?这是正确的吗?
<div id="map">
<div id="gmap"></div>
<div id="olmap"></div>
</div>
我通过这样的结构得到一个错误。这是我得到的错误:
Cannot read property 'parentNode' of null
关于如何在 OL3 中实现 Google map 的任何线索?
最佳答案
该尝试已被弃用,最好查看:https://github.com/mapgears/ol3-google-maps
关于javascript - Openlayers 3 获取谷歌地图基础层?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34087753/