嵌入式 Google SearchControl 地图中的交通图层
-
11-09-2019 - |
题
如何在网页上的 Google 地图中激活 Transit 图层?地图是使用搜索控件创建的。
<!-- ++Begin Map Search Control Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->
<!--
// The Following div element will end up holding the map search control.
// You can place this anywhere on your page
-->
<div id="mapsearch">
<span style="color:#676767;font-size:11px;margin:1px;padding:0px;">Loading map ...</span>
</div>
<!-- Maps Api, Ajax Search Api and Stylesheet
// Note: If you are already using the Maps API then do not include it again
// If you are already using the AJAX Search API, then do not include it
// or its stylesheet again
//
// The Key Embedded in the following script tags is designed to work with
// the following site:
-->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAxMICTqJZCQhVvaG5Z6vcbBQsQZTeCW4bnSEJHaQGIFLLp_Ev4hQzmbQjyOZxyLLe8CmaFaW5G3RI8g"
type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-msw&key=ABQIAAAAxMICTqJZCQhVvaG5Z6vcbBQsQZTeCW4bnSEJHaQGIFLLp_Ev4hQzmbQjyOZxyLLe8CmaFaW5G3RI8g"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
</style>
<!-- Map Search Control and Stylesheet -->
<script type="text/javascript">
window._uds_msw_donotrepair = true;
</script>
<script src="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js?mode=new"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css");
</style>
<style type="text/css">
.gsmsc-mapDiv {
height : 400px;
}
.gsmsc-idleMapDiv {
height : 400px;
}
#mapsearch {
width : 700px;
margin: 1px;
padding: 0px;
}
</style>
<script type="text/javascript">
function LoadMapSearchControl() {
var options = {
zoomControl : GSmapSearchControl.ZOOM_CONTROL_ENABLE_ALL,
title : "<?php echo $city. ','. $country; ?>",
url : "",
idleMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM+1,
activeMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM+1
}
new GSmapSearchControl(
document.getElementById("mapsearch"),
"<?php echo $city. ','. $country; ?>",
options
);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadMapSearchControl);
</script>
<!-- ++End Map Search Control Wizard Generated Code++ -->
解决方案
目前无法通过 API 使用 Transit 层。有一个 高级请求 针对这个问题开放。
其他提示
在谷歌地图API将让你添加一个图块叠加层一>到地图,所以:
var tileLayerOverlay = new GTileLayerOverlay(
new GTileLayer(null, null, null, {
tileUrlTemplate: 'http://example.com/transit_tiles/{Z}_{X}_{Y}.png',
isPng:true,
opacity:1,
})
);
map.addOverlay(tileLayerOverlay);
但是,要做到这一点你需要已经使自己的一套过境瓦片。
顺便提及,谷歌使用其自己的传输层瓦片经由类似方案来检索的:
HTTP:// MLT2 .google.com / mapslt?lyrs =过境&X = 1310&Y = 3166&Z = 13&W = 256&H = 256&GL = US&HL =烯
所以,你可以这样做:
var gTransitTileUrlTemplate = 'http://mlt1.google.com/mapslt?lyrs=transit&x={X}&y={Y}&z={Z}&w=256&h=256&gl=us&hl=en';
不过,这可能违反了Google地图API的服务条款,并没有保证,谷歌将不会改变这个URL,打破您的应用程序。
不隶属于 StackOverflow