如何在 OpenLayers 3 中使用谷歌地图?
我想从 OpenLayers 2 迁移到 3。
这是一个例子:
google map integration with OpenLayers example
但是使用这种方法需要更改旧的 HTML 代码(需要两个元素,示例中提到的 'gmap' 和 'olmap')。
ol3 官方不支持谷歌地图,但我的问题是:
“如何在我的项目中像 MapServer 一样使用 Google Maps Tile Service,而无需将 google API reference(用于优化目的)添加到脚本标签?”
这是我与 OpenLayers 2 一起正常工作的旧代码:
var map = new OpenLayers.Map("map_canvas", {
controls: [
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.OverviewMap()
],
units: "m",
numZoomLevels: 21
});
var gmap = new OpenLayers.Layer.Google(
{ type: google.maps.MapTypeId.ROADMAP, numZoomLevels: 21}
);
map.addLayers([gmap]);
和html代码:
<div id="map_canvas">
</div>
感谢任何帮助。
最佳答案
我找到了解决方案:
JsFiddle
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: 'http://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
attributions: [
new ol.Attribution({ html: '© Google' }),
new ol.Attribution({ html: '<a href="https://developers.google.com/maps/terms">Terms of Use.</a>' })
]
})
})
],
view: new ol.View({
center: ol.proj.transform(
[-110, 45], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
html, body, #map {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
<link href="http://openlayers.org/en/master/css/ol.css" rel="stylesheet"/>
<script src="http://openlayers.org/en/master/build/ol.js"></script>
<div id="map"></div>
但我不确定此代码是否与 Google 使用条款相反。
关于javascript - 在 OpenLayers 3 中使用平铺的 Google map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33983656/