Google maps 创建自定义地图
我正在寻找一种创建自定义地图的方法。假设我有我的建筑的图纸设计。我想在那栋楼里找到我现在的位置。那张地图只适合我的建筑。我使用3G或wifi获取当前位置 你知道如何创建一种微型地图，有确切的位置吗Google maps 创建自定义地图,google-maps,dictionary,gps,location-services,Google Maps,Dictionary,Gps,Location Services,我正在寻找一种创建自定义地图的方法。假设我有我的建筑的图纸设计。我想在那栋楼里找到我现在的位置。那张地图只适合我的建筑。我使用3G或wifi获取当前位置 你知道如何创建一种微型地图，有确切的位置吗 非常感谢，是的，基本上就是这样： 所以你用蓝图做了一个图像。旋转图像内部的蓝图，使图像顶部朝北 然后，您必须知道图像边缘的坐标 作为一个例子，我展示了白宫（美国华盛顿特区） 图为： 图像的边界，我估计为[38.897449233423366，-77.03687542676926]到[38.89795
非常感谢，是的，基本上就是这样： 所以你用蓝图做了一个图像。旋转图像内部的蓝图，使图像顶部朝北 然后，您必须知道图像边缘的坐标
作为一个例子，我展示了白宫（美国华盛顿特区） 图为： 图像的边界，我估计为[38.897449233423366，-77.03687542676926]到[38.897958578125014，-77.03614050149918]。这不完全正确，请随意估计比我好 我唯一更改的代码（根据我给您的链接）是在函数initMap（）中 然后我还添加了函数geoFindMe（），以获取当前位置。它会在你当前的位置上做标记 注意: 地理定位不是谷歌地图服务。这是你的手机/平板电脑的一项服务 准确度不会是完美的。对于普通的房子，你可能会在错误的房间里看到标记。建筑物越大越好
<!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>
添加自定义覆盖
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
高度：400px；
}
var叠加；
USGSOverlay.prototype=new google.maps.OverlayView（）；
var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：18，
中心：{lat:38.89765946197239，lng:-77.03650183923475}，
mapTypeId:google.maps.mapTypeId.SATELLITE
});
var bounds=new google.maps.LatLngBounds(
新的google.maps.LatLng（38.897449233423366，-77.03687542676926），
新google.maps.LatLng（38.897958578125014，-77.03614050149918）
);
var srcImage=http://www.whitehousemuseum.org/images/floor2-c1880.jpg“；//白宫，华盛顿特区
覆盖=新的USGSOverlay（边界、srcImage、地图）；
//地理定位
geoFindMe（）；
}
函数USGSOverlay（边界、图像、地图）{
this.bounds=bounds；
this.image=image；
this.map=map；
this.div=null；
这个.setMap（map）；
}
USGSOverlay.prototype.onAdd=函数（）{
var div=document.createElement（'div'）；
div.style.borderStyle='none'；
div.style.borderWidth='0px'；
div.style.position='绝对'；
var img=document.createElement（'img'）；
img.src=this.image；
img.style.width='100%'；
img.style.height='100%'；
img.style.position='绝对'；
儿童分部（img）；
this.div=div；
var panes=this.getPanes（）；
窗格。覆盖层。附属物（分区）；
};
USGSOverlay.prototype.draw=函数（）{
var overlyprojection=this.getProjection（）；
var sw=overlyprojection.fromLatLngToDivPixel（this.bounds_u2;.getSouthWest（））；
var ne=overlyprojection.fromLatLngToDivPixel（this.bounds_u2;.getNorthEast（））；
var div=this.div_2;；
div.style.left=sw.x+‘px’；
div.style.top=ne.y+'px'；
div.style.width=（ne.x-sw.x）+“px”；
div.style.height=（西南y-东北y）+“px”；
};
USGSOverlay.prototype.onRemove=函数（）{
this.div\u.parentNode.removeChild（this.div\u）；
this.div=null；
};
google.maps.event.addDomListener（窗口'load'，initMap）；
//地理定位。找到你的位置，并在地图上的那个位置放置一个标记
//@见https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
函数geoFindMe（）{
var输出=document.getElementById（“日志”）；
如果（！navigator.geolocation）{
output.innerHTML=“您的浏览器不支持地理位置””；
返回；
}
功能成功（职位）{
变量纬度=位置坐标纬度；
var经度=position.coords.longitude；
//在那里设置一个标记
var marker=new google.maps.marker({
位置：{纬度，经度}，
地图：地图，
标题：“你在这里”
});
};
函数错误（）{
output.innerHTML=“无法检索您的位置”；
};
navigator.geolocation.getCurrentPosition（成功，错误）；
}