高德使用谷歌的地圖 衛星標準進行切換
阿新 • • 發佈：2019-03-04
shee 進行 .cn 1.0 疊加 pad mar css visible
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.10&key=XXX"
></script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
</style>
</head>
<body>
<div id="map"></div>
<div class="input-card" style="width:16rem">
<h4>地圖點擊相關事件</h4>
<div>
<div class="input-item">
<button id="clickOn" class="btn" style="margin-right:1rem;">綁定事件</button>
</div>
</div>
<div id="map1"></div>
</div>
</body>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
//定義谷歌衛星切片圖層
var googleLayer = new AMap.TileLayer({
getTileUrl:
"http://mt{1,2,3,0}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galile"
});
//定義一個路網圖層
var Sate = new AMap.TileLayer.Satellite();
var map = new AMap.Map("map", {
center: [121.41512, 31.1984],
zoom: 17,
layers: [googleLayer, Sate]
});
// 事件綁定
function clickOn(){
var layer = new AMap.TileLayer({
zooms:[3,20], //可見級別
visible:true, //是否可見
opacity:1, //透明度
zIndex:0 //疊加層級
})
var map = new AMap.Map(‘map‘,{
layers:[googleLayer,layer] //當只想顯示標準圖層時layers屬性可缺省
});
log.success("綁定事件!");
}
// 解綁事件
function clickOff(){
log.success("解除事件綁定!");
}
// 給按鈕綁定事件
document.getElementById("clickOn").onclick = clickOn;
document.getElementById("clickOff").onclick = clickOff;
</script>
</html>
高德地圖使用谷歌瓦片的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.10&key=XXX"
></script>
<style>
html,
body,
#map {
width: 100%;
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
</style>
</head>
<body>
<div id="map"></div>
<div class="input-card" style="width:16rem">
<h4>地圖點擊相關事件</h4>
<div>
<div class="input-item">
<button id="clickOn" class="btn" style="margin-right:1rem;">綁定事件</button>
</div>
</div>
<div id="map1"></div>
</div>
</body>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
//定義谷歌衛星切片圖層
var googleLayer = new AMap.TileLayer({
getTileUrl:
"http://mt{1,2,3,0}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galile"
});
//定義一個路網圖層
var Sate = new AMap.TileLayer.Satellite();
var map = new AMap.Map("map", {
center: [121.41512, 31.1984],
zoom: 17,
layers: [googleLayer, Sate]
});
// 事件綁定
function clickOn(){
var layer = new AMap.TileLayer({
zooms:[3,20], //可見級別
visible:true, //是否可見
opacity:1, //透明度
zIndex:0 //疊加層級
})
var map = new AMap.Map(‘map‘,{
layers:[googleLayer,layer] //當只想顯示標準圖層時layers屬性可缺省
});
log.success("綁定事件!");
}
// 解綁事件
function clickOff(){
log.success("解除事件綁定!");
}
// 給按鈕綁定事件
document.getElementById("clickOn").onclick = clickOn;
document.getElementById("clickOff").onclick = clickOff;
</script>
</html>
高德使用谷歌的地圖 衛星標準進行切換