<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2d/3d/卫星地图转换+搜索</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=?"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
}
#panel {
position: absolute;
background: #FFF;
width:300px;
padding: 20px;
z-index: 9999;
top: 30px;
left: 30px;
}
#btn-2d {
left: 20px;
}
#btn-3d {
left: 80px;
}
#btn-wx {
left: 140px;
}
</style>
<body>
<div id="container"></div>
<div id="panel">
<p><label>地址</label><input id='address' type="text" value='' ><input id="convert" type="button" class="btn" value="搜索" onclick="convert()" /></p>
<input type="button" id="btn-2d" onclick="change2D()" value="切换2D">
<input type="button" id="btn-3d" onclick="change3D()" value="切换3D">
<input type="button" id="btn-wx" onclick="changewx()" value="切换wx">
</div>
</body>
<script type="text/javascript">
var map = new TMap.Map('container', {
zoom: 14,
center: new TMap.LatLng(39.986785, 116.301012),
});
var geocoder = new TMap.service.Geocoder();
var markers = new TMap.MultiMarker({
map: map,
geometries: [],
});
function convert() {
markers.setGeometries([]);
geocoder
.getLocation({ address: document.getElementById('address').value })
.then((result) => {
markers.updateGeometries([
{
id: 'main',
position: result.result.location,
},
]);
map.setCenter(result.result.location);
});
}
function change2D() {
map.setViewMode('2D');
}
function change3D() {
map.setViewMode('3D');
map.setPitch(70);
}
function changewx() {
map.destroy();
var center = new TMap.LatLng(39.984104, 116.307503);
map = new TMap.Map("container", {
zoom:12,
center: center,
baseMap: {
type: 'satellite'
}
});
}
</script>
</html>