Question

我有一个简单的房子形象（顶视图，看起来像一个三维模型），我想把这张房子的照片放在这个房子所在的地方（路线图上）。 This is an example of what I want。但我的位置有一个很大的问题，我只是无法正确放置图像，它被撕裂或驱走（an example of what I got）。我阅读了有关叠加层的所有文档，但我不知道如何制作这个东西，也许有人告诉我该怎么做或显示方向去哪里？

代码示例：

<!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>

Answer 1

锚点位于'bounds'（图像）底部的中心点（您可以看到here, Icon being an overlay too like 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>

希望这对你有所帮助。

注意：代码仅用于证明我的观点，不是表现最好的正确方法。

如何使用Api v3在Google Map上放置图像？

1 个答案: