创建自定义地图

Question

我正在寻找一种创建自定义地图的方法。假设我有我的建筑的图纸设计。我想找到我在那个建筑物中的当前位置。那张地图只适用于我的大楼。我使用 3G 或 wifi 获取当前位置

你知道如何制作那种带有确切位置的迷你地图吗？

非常感谢，

Answer 1

是的，基本上就是这样：https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

所以你用蓝图做了一个图像。旋转图像内的蓝图，使图像的顶部朝北。

那么你必须知道图像边缘的坐标。

例如，我展示了白宫（美国华盛顿特区）。

图片如下：http://www.whitehousemuseum.org/images/floor2-c1880.jpg

该图像的边界，我估计为 [38.897449233423366,-77.03687542676926] 到 [38.897958578125014,-77.03614050149918]。不完全正确，请随意估计比我好。

我更改的唯一代码（相对于我给你的 link）是在函数 initMap() 中。

然后我还添加了函数 geoFindMe()，以获取您当前的位置。它会在您当前的位置上放置一个标记。

通知：

地理定位不是 Google 地图服务。这是您 phone/tablet/...

的一项服务

准确性不会完美。对于普通的房子，您可能会在错误的房间看到标记。楼越大越好。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Adding a Custom Overlay</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?"></script>
    <script>
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 18,
    center: {lat: 38.89765946197239, lng: -77.03650183923475},
    mapTypeId: google.maps.MapTypeId.SATELLITE
  });

  var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(38.897449233423366,-77.03687542676926),
      new google.maps.LatLng(38.897958578125014,-77.03614050149918)
  );

  var srcImage = 'http://www.whitehousemuseum.org/images/floor2-c1880.jpg';  // the white house, Washington DC
  overlay = new USGSOverlay(bounds, srcImage, map);
  // geolocation
  geoFindMe();
}

function USGSOverlay(bounds, image, map) {
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;
  this.div_ = null;
  this.setMap(map);
}

USGSOverlay.prototype.onAdd = function() {
  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  this.div_ = div;

  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

USGSOverlay.prototype.draw = function() {

  var overlayProjection = this.getProjection();

  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};
google.maps.event.addDomListener(window, 'load', initMap);

// Geolocation.  Finds your location and puts a marker on a map, on that position
// @see https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
function geoFindMe() {
  var output = document.getElementById("log");
  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;
    // set a marker there
    var marker = new google.maps.Marker({
      position: {lat: latitude,lng: longitude},
      map: map,
      title: 'You are here'
    });
  };

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  };
  navigator.geolocation.getCurrentPosition(success, error);
}
    </script>
  </head>
  <body>
    <div id="map"></div>
    <div id="log"></div>
  </body>
</html>

创建自定义地图

Create a custom map

gps

google-maps

dictionary

location-services