Using Tiled Google Map With OpenLayers 3
Using Tiled Google Map With OpenLayers 3
如何在OpenLayers 3中使用谷歌地图
我想从OpenLayers 2迁移到3。以下是一个示例:谷歌地图与OpenLayers的集成示例
但使用此方法需要更改旧的HTML代码(需要两个元素,示例中提到的"gmap"answers"olmap")
谷歌地图官方不支持ol3,但我的问题是:
"我如何像MapServer一样在我的项目中使用Google Maps Tile Service,而不需要在脚本标签中添加Google API参考(用于优化目的)?"
以下是我的旧代码,它可以正确地与OpenLayer2:配合使用
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>
感谢您的帮助。
我找到了解决方案:
Js报价
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>
但我不确定这个代码是否与谷歌的使用条款形成对比。
相关文章:
- Fighting with FRP
- issue with FB.Event.subscribe
- geolocation-marker.js conflict with markerclusterer.js
- Angular 2.0 with JavaScript or TypeScript?
- 为什么不推荐使用“with”?是否有更好或其他方法可以“下降”到对象的命名空间
- WebComponentsJS with IE10
- 指令的模板必须只有一个根元素:With restrict E&替换true
- 使用不带文本文件的OpenLayers显示POI
- OpenLayers在悬停时高亮显示功能,并在单击时选择
- 注册OpenLayers事件时,即使使用匿名函数或绑定,JavaScript关闭也会触发循环内的所有内容
- timeago.js with datatable and PHP
- Ajax and Json with Rails
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- errors with Javascript try catch
- how to split a string with ','
- Understanding Javascript scope with "var that = this&qu
- OpenLayers 3.13v: issue with ol.format.GeoJSON()
- OpenLayers with jQuery Mobile
- Using Tiled Google Map With OpenLayers 3
- InfoWindows with OpenLayers