杭州实景地图
欢迎使用杭州三维地图实景地图。您可以拖动地图查看杭州的各个角落，也可以放大或缩小地图以查看不同细节。
此地图使用高分辨率卫星图像和 3D 模型创建，可为您提供杭州最真实、最全面的视图。
您可以使用地图上的搜索栏搜索特定地点或地标。您还可以使用测量工具测量距离或面积。
此地图是探索杭州、规划行程或了解这座城市的绝佳资源。我们希望您喜欢使用它！
style.css
css
body {font-family: sans-serif;
}map {width: 100vw;height: 100vh;
}info-panel {position: absolute;top: 10px;left: 10px;padding: 10px;background-color: ffffff;box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}info-panel h2 {font-size: 24px;margin-bottom: 5px;
}info-panel p {font-size: 16px;margin-bottom:5px;
}script.js
javascript
// 创建地图
var map = new google.maps.Map(document.getElementById('map'), {center: { lat: 30.2741, lng: 120.1216 },zoom: 12
});// 添加卫星图像覆盖层
var satelliteLayer = new google.maps.ImageMapType({getTileUrl: function(coord, zoom) {return 'https://mt1.google.com/vt/lyrs=s&x=' + coord.x + '&y=' + coord.y + '&z=' + zoom;},tileSize: new google.maps.Size(256, 256),maxZoom: 20
});
map.overlayMapTypes.push(satelliteLayer);// 添加 3D 模型覆盖层
var modelLayer = new google.maps.GroundOverlay({url: 'https://storage.googleapis.com/maps-3d-models/buildings/hangzhou_china.gltf',bounds: new google.maps.LatLngBounds(new google.maps.LatLng(30.2682, 120.1159),new google.maps.LatLng(30.2799, 120.1274))
});
modelLayer.setMap(map);// 添加搜索栏
var searchBox = new google.maps.places.SearchBox(document.getElementById('search-box')
);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchBox);// 添加事件侦听器以在用户选择位置时平移地图
searchBox.addListener('places_changed', function() {var place = searchBox.getPlaces()[0];if (place.geometry.viewport) {map.fitBounds(place.geometry.viewport);} else {map.setCenter(place.geometry.location);map.setZoom(17);}
});// 添加测量工具
var drawingManager = new google.maps.drawing.DrawingManager({drawingMode: google.maps.drawing.OverlayType.MARKER,drawingControl: true,drawingControlOptions: {position: google.maps.ControlPosition.TOP_CENTER,drawingModes: ['marker', 'polygon', 'polyline', 'rectangle']}
});
drawingManager.setMap(map);
