高德地图使用谷歌瓦片的方法
<!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" />
<title>Document</title>
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.10&key=XXX"
></script>
<style>
html,
body,
#map {
100%;
height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="input-card" style="16rem">
<h4>地图点击相关事件</h4>
<div>
<div class="input-item">
<button id="clickOn" class="btn" style="margin-right:1rem;">绑定事件</button>
<button id="clickOff" class="btn">解绑事件</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>