如何使用Api v3在Google地图上放置图像？
如何使用Api v3在Google地图上放置图像？
提问于 2013-11-20 14:52:45
我有一个简单的房子图像(顶部视图，看起来像一个三维模型)，我想把房子的这张照片放在这个房子所在的地方(在路线图上)。这就是我想要的例子。但我的位置有一个很大的问题，我只是不能正确地放置图像，它被撕开或驱动器(我得到的一个例子)。我看了所有关于覆盖的文档，但我不知道如何制作这个东西，也许有人会告诉我如何去做，或者指明方向。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Ground Overlays</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var Overlay;
function initialize() {
var house = new google.maps.LatLng(55.734907, 37.571526);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(55.734603,37.571374),
new google.maps.LatLng(55.734944,37.572097),
new google.maps.LatLng(55.735032,37.571221),
new google.maps.LatLng(55.735201,37.570343),
new google.maps.LatLng(55.735218,37.570840),
new google.maps.LatLng(55.735238,37.571670),
new google.maps.LatLng(55.735423,37.571147),
new google.maps.LatLng(55.735551,37.570891)
);
var mapOptions = {
zoom: 17,
center: house,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
Overlay = new google.maps.GroundOverlay(
'file:///home/map_top.png',
imageBounds);
Overlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2013-11-22 15:21:27
锚点位于“界限”(图像)底部的中心点(您可以看到在这里，图标也是一个类似于GroundOverlay的覆盖层，您可以安全地推断这一点也适用于GroundOverlay )。
因此，必须计算出您的界限来说明这一点。
此外，google.maps.LatLngBounds的构造函数只占2点。在你的例子中，两个第一点：
new google.maps.LatLng(55.734603,37.571374)
new google.maps.LatLng(55.734944,37.572097)如果你通过更多的分数，他们将被忽视。
注意，google.maps格式的坐标是DD.mmmmmm格式的，所以点后的部分是米(如果我的内存没有让我失望的话)。因此，如果你的图像是在规模，你可以很容易地计算你的锚点。
在下面的示例中，我使用了您的两个第一点。为了让它发挥作用：
- 复制.html文件中的所有代码
- 更改图像的路径。
- 运行页面。
然后，你可以移动到右边和左边，你的形象来演示我的意思。
编辑代码:添加函数使图像更小/更大？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Ground Overlays</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
<div>
<input type="text" id="step" value="100" />
<button id="left">Left</button>
<button id="right">Right</button>
<button id="smaller">Smaller</button>
<button id="bigger">Bigger</button>
<label id="lng0">0</label>
<label id="lng1">1</label>
</div>
<div id="map-canvas"></div>
<script>
var stepPresition = 1000000.0;
var Overlay;
var markers = [];
var map;
var coordinates = [{ lat: 55.734603, lng: 37.571374 }, { lat: 55.734944, lng: 37.572097 }];
var points;
function initialize() {
var house = new google.maps.LatLng(55.734907, 37.571526);
var mapOptions = {
zoom: 17,
center: house,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
AddOverlay();
SetLabels();
}
function RemoveMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = [];
}
function AddOverlay() {
points = [new google.maps.LatLng(coordinates[0].lat, coordinates[0].lng),
new google.maps.LatLng(coordinates[1].lat, coordinates[1].lng)];
for (var i = 0; i < points.length; i++) {
markers.push(new google.maps.Marker({ position: points[i], map: map, title: "Marker " + i }));
}
var imageBounds = new google.maps.LatLngBounds(points[0], points[1]);
Overlay = new google.maps.GroundOverlay('Content/images/map_top.png', imageBounds);
Overlay.setMap(map);
}
function RemoveOverlay() {
Overlay.setMap(null);
Overlay = null;
}
function MoveTo(step) {
for (var i = 0; i < coordinates.length; i++) {
coordinates[i].lng = coordinates[i].lng + step;
}
RemoveMarkers();
RemoveOverlay();
AddOverlay();
SetLabels();
}
function MoveToLeft() {
var step = parseFloat($("#step").val() / stepPresition);
MoveTo((-1) * step);
}
function MoveToRight() {
var step = parseFloat($("#step").val() / stepPresition);
MoveTo(step);
}
function SizeTo(step) {
coordinates[1].lng = coordinates[1].lng + step;
coordinates[1].lat = coordinates[1].lat + step;
RemoveMarkers();
RemoveOverlay();
AddOverlay();
SetLabels();
}
function SizeToSW() {
var step = parseFloat($("#step").val() / stepPresition);
SizeTo((-1) * step);
}
function SizeToNE() {
var step = parseFloat($("#step").val() / stepPresition);
SizeTo(step);
}
function SetLabels() {
var lng0 = $("#lng0"), lng1 = $("#lng1");
lng0.html("SW Point Longitude: " + parseInt(coordinates[0].lng * stepPresition) / stepPresition);
lng1.html("NE Point Longitude: " + parseInt(coordinates[1].lng * stepPresition) / stepPresition);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function () {
$("#left").on('click', function () {
MoveToLeft();
});
$("#right").on('click', function () {
MoveToRight();
});
$("#smaller").on('click', function () {
SizeToSW();
});
$("#bigger").on('click', function () {
SizeToNE();
});
});
</script>
</body>
</html>希望这能帮到你。
注意:代码只是为了演示我的观点，并不是我在这里所做的最好的表现和正确的方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20099148
复制相关文章
相似问题
腾讯云开发者
