[英]Using Tiled Google Map With OpenLayers 3
如何在OpenLayers 3中使用谷歌地圖?
我想從OpenLayers 2遷移到3.這是一個例子: 谷歌地圖與openlayers集成的例子
但是使用這種方法需要更改舊的html代碼(兩個元素需要,'gmap'和'olmap'提到的例子)。
ol3正式不支持谷歌地圖,但我的問題是:
“我如何在我的項目中使用Google Maps Tile Service,就像MapServer一樣,無需為腳本標記添加google api參考 (用於優化目的)?”
這是我的舊代碼,可以正常使用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>
感謝任何幫助
我找到了解決方案:
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使用條款形成對比。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.