谷歌地图api v3固定大小的地图javascript
我在一个div中创建了一个地图，大小为1024px*1024px。谷歌地图api v3固定大小的地图javascript,javascript,google-maps,Javascript,Google Maps,我在一个div中创建了一个地图，大小为1024px*1024px。 我使用fitbounds设置纬度和经度，并调整地图的大小 但世界上还有两个地方 <!DOCTYPE html> <html> <head> <title>Repoint Map</title> <style> html, body, #map-canvas { height: 100%; w
我使用fitbounds设置纬度和经度，并调整地图的大小 但世界上还有两个地方
<!DOCTYPE html>
<html>
<head>
<title>Repoint Map</title>
<style>
html, body, #map-canvas {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
min-width: 1024px;
min-height: 1024px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#map_canvas_container {position: relative;}
div#content {
width: 100%; height: 100%;
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
/*
Provide the following styles for both ID and class,
where ID represents an actual existing "panel" with
JS bound to its name, and the class is just non-map
content that may already have a different ID with
JS bound to its name.
*/
#panel, .panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#panel select, #panel input, .panel select, .panel input {
font-size: 15px;
}
#panel select, .panel select {
width: 100%;
}
#panel i, .panel i {
font-size: 12px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
// In the following example, markers appear when the user clicks on the map.
// The markers are stored in an array.
// The user can then click an option to hide, show or delete the markers.
var geocoder = new google.maps.Geocoder();
var map;
var markers = [];
function initialize() {
// var Extrico = new google.maps.LatLng(56.1341602, 8.99381440000002);
var punkt1 = new google.maps.LatLng(58.0002316, 10.000000000012);
var punkt2 = new google.maps.LatLng(56.0, 8.0)
var southWest = new google.maps.LatLng(85, -180);
var northEast = new google.maps.LatLng(-85, 180);
var bounds = new google.maps.LatLngBounds(southWest, northEast);
var mapOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.trigger(map, 'resize');
map.fitBounds(bounds);
map.setZoom(map.getZoom() + 1);
codeLatLng();
// reverse geolocation
var geoMarker = [];
function codeLatLng() {
var input = '51, 9';
var latlngStr = input.split(',', 2);
var latlng = new google.maps.LatLng(latlngStr[0], latlngStr[1]);
geocoder.geocode({'location': latlng }, function (results, status) {
console.log(results, status);
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
geoMarker = new google.maps.Marker({
position: latlng,
map: map
});
} else {
window.alert('no location ' + status);
}
}
});
}
addMarker(geoMarker);
// This event listener will call addMarker() when the map is clicked.
// google.maps.event.addListener(map, 'click', function (event) {
// addMarker(event.latLng);
// });
// Adds a marker at the center of the map.
// addMarker(Extrico);
// addMarker(punkt1);
// addMarker(punkt2);
}
// Add a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
}
// Shows any markers currently in the array.
function showMarkers() {
setAllMap(map);
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', initialize);
</script>
</head>
<body>
<div id="panel">
<input onclick="clearMarkers();" type=button value="Hide Markers">
<input onclick="showMarkers();" type=button value="Show All Markers">
<input onclick="deleteMarkers();" type=button value="Delete Markers">
</div>
<div id="map-canvas"></div>
</body>
</html>
复点图
html，正文，#地图画布{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
最小宽度：1024px；
最小高度：1024px；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
}
#映射画布容器{位置：相对；}
分区内容{
宽度：100%；高度：100%；
}
#面板{
位置：绝对位置；
顶部：5px；
左：50%；
左边距：-180px；
z指数：5；
背景色：#fff；
填充物：5px；
边框：1px实心#999；
}
/*
为ID和类提供以下样式，
其中ID表示实际存在的“面板”，带有
JS绑定到它的名称，而该类只是非映射
可能已与具有不同ID的内容
JS绑定到它的名称。
*/
#面板，.panel{
字体系列：“Roboto”，“sans-serif”；
线高：30px；
左侧填充：10px；
}
#面板选择，#面板输入，.panel选择，.panel输入{
字体大小：15px；
}
#面板选择，.panel选择{
宽度：100%；
}
#第一组，第一组{
字体大小：12px；
}
//在下面的示例中，当用户单击地图时，会出现标记。
//标记存储在一个数组中。
//然后，用户可以单击一个选项来隐藏、显示或删除标记。
var geocoder=new google.maps.geocoder（）；
var映射；
var标记=[]；
函数初始化（）{
//var Extrico=new google.maps.LatLng（56.1341602,8.99381440000002）；
var punkt1=新的google.maps.LatLng（58.0002316,10.0000000000 12）；
var punkt2=新的google.maps.LatLng（56.0,8.0）
var西南=新的google.maps.LatLng（85，-180）；
var东北=新的google.maps.LatLng（-85180）；
var bounds=new google.maps.LatLngBounds（西南、东北）；
var mapOptions={
缩放：1，
中心：新google.maps.LatLng（0,0），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
google.maps.event.trigger（映射，'resize'）；
映射边界（bounds）；
map.setZoom（map.getZoom（）+1）；
codeLatLng（）；
//反向地理定位
var geoMarker=[]；
函数codeLatLng（）{
变量输入='51,9'；
var latlngStr=input.split（'，'，2）；
var latlng=new google.maps.latlng（latlngStr[0]，latlngStr[1]）；
geocoder.geocode（{'location'：latlng}，函数（结果，状态）{
控制台日志（结果、状态）；
if（status==google.maps.GeocoderStatus.OK）{
如果（结果[1]）{
geoMarker=新的google.maps.Marker({
位置：latlng，
地图：地图
});
}否则{
窗口警报（“无位置”+状态）；
}
}
});
}
addMarker（geomemarker）；
//单击映射时，此事件侦听器将调用addMarker（）。
//google.maps.event.addListener（映射，'click'，函数（事件）{
//添加标记（事件标记）；
// });
//在地图的中心添加标记。
//addMarker（Extrico）；
//addMarker（punkt1）；
//addMarker（punkt2）；
}
//将标记添加到地图并推送到阵列。
功能添加标记（位置）{
var marker=new google.maps.marker({
位置:位置,，
地图：地图
});
标记器。推（标记器）；
}
//在阵列中的所有标记上设置贴图。
函数setAllMap（映射）{
对于（var i=0；i请多加些硼。。添加一些代码。。列出你尝试过的东西。我已经添加了我使用的代码。你为什么不缩放地图？
var mapOptions = {
zoom: 2,
minZoom: 2,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};