如何使用Api v3在谷歌地图上放置图像
How to put an image on Google Map using Api v3?
我有一张房子的简单图像（俯视图，看起来像一个三维模型），我想把这张房子的照片放在房子所在的地方（在路线图上）。这是我想要的一个例子。但我的位置有很大的问题，我就是不能正确放置图像，它被撕裂或脱落（我得到的一个例子）。我读了所有关于覆盖的文档，但我不知道如何制作这个东西，也许有人告诉我如何制作，或者告诉我去哪里的方向？
代码示例：
<!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>
锚点位于"边界"（图像）底部的中心点（你可以在这里看到，图标也是一个覆盖层，就像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.mmmmmmm，因此该点之后的部分是米（如果我的记忆没有让我失望的话）。因此，如果你的图像是按比例绘制的，你可以很容易地计算出你的锚点。
在下面的例子中，我处理了你的两个第一点。让它发挥作用：
- 将所有代码复制到.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>
希望这对你有所帮助。
注意：该代码只是为了演示我的观点，并不是我在这里所做的最好的执行和正确的方式。
相关文章：
- 将谷歌地图中的平移边界设置为图像覆盖
- 谷歌地图加载后隐藏加载图像
- 加载、滚动、放大和缩小图像，如谷歌地图
- 角度谷歌地图:将图像放在信息窗口
- 谷歌地图和谷歌地点库中不同地点类型的不同图像
- 如何使用Api v3在谷歌地图上放置图像
- 带有谷歌地图和天气图像的网页只能在IE中运行，在Chrome中无效
- 将谷歌地图另存为图像 - 使用javascript(能够截取屏幕截图）
- 当缩放级别为 1 时，谷歌地图显示 kml(内部是图像 URL）不正确
- 谷歌地图加载静态图像
- 谷歌地图信息窗口中的弹性滑块未加载图像
- 在谷歌地图上添加多个带有标题和位置的标记，并在点击时更改图像
- 在谷歌地图中动态调整标记图像的大小
- 谷歌地图首先加载灰色，当调整大小时加载图像
- 捕获谷歌地图作为图像
- 我已经为我的谷歌地图定义了我的指针图像和指针位置.为什么不显示
- 如何将图像像素转换为纬度和液化天然气中的相同位置以供谷歌地图使用
- 在嵌入谷歌地图的图像中添加用户界面
- 动态画布大地图像谷歌地图
- 如何创建未预定义的多图像谷歌地图标记阵列
