Google地图 - 如何设置缩放级别 [英] Google Maps - how to set the zoom level
问题描述
我一直在尝试4年以上来弄清楚如何使用谷歌地图。我超越欣喜若狂，终于能够用正确的地址生成地图。
这是我的javascript。
我现在正在努力如何设置缩放级别。我已经在下面显示的每个地方尝试了它 - 但它们都不起作用。在每种情况下（不管我设定为缩放级别的数量如何），我都会获得特定建筑物的真实近距离地图。
任何人都可以看到我做错了什么，或者我需要做什么才能让我的地图识别我的缩放级别请求？
$ b
函数initMap（）{
var map = new我没有在控制台中显示任何js错误。 google.maps.Map（document.getElementById（'map'），{
zoom：5
}）;
var bounds = new google.maps.LatLngBounds（）;
// var opts = {
// zoom：10，
// max_zoom：16
//}
var n = addresses.length ;
for（var i = 0; i< n; i ++）{
var lat = addresses [i] .latitude;
var lng =地址[i] .longitude;
if（lat == null || lng == null）{
console.log（addresses [i] .name +does not have coordinates）;
} else {
var address = new google.maps.Marker（{
position：{lat：parseFloat（lat），lng：parseFloat（lng）}，
title：地址[i] .name，
map：map //，
// zoom：8
}）;
bounds.extend（address.position）;
}
}
map.fitBounds（bounds）;
$ / code> 请注意回答为什么这个问题与SO上的其他许多问题有所不同。我特别在如何以及在哪里使用这个JS提供的功能而苦苦挣扎。我无法理解任何我已经设法生成的JS - 以上版本是4年以上努力学习的结果。我不能在其他职位上采用通用的想法，并且像其他人一样能够轻松地应用它们。当我尝试学习破译如何与这些语言交流时，请耐心等待。这不是我能够很容易理解的。
此外，特别是针对您标记的答案中的一点 - 也许代码在这一点上很好在问及时问的问题，但它看起来从谷歌库，正确的表达应该是缩放：4没有setZoom（东西）。我尝试了两种方法，无法让他们中的任何一个在我的代码中工作。
$ b XOMENA的建议
考虑到Xomena的建议，我试图在我的地图功能中定义缩放和居中（尽管如果我在正确的位置完成了这一操作，我不会感到厌烦）。
这不起作用。控制台在我的js文件中显示错误信息：
未捕获的SyntaxError：意外标识符
函数initMap（）{
var map = new google.maps.Map（document.getElementById（'map'），{$ b $ setZoom：5 $ b $ setCenter = addresses.first
}）;
var bounds = new google.maps.LatLngBounds（）;
// var opts = {
// zoom：10，
// max_zoom：16
//}
var n = addresses.length ;
for（var i = 0; i< n; i ++）{
var lat = addresses [i] .latitude;
var lng =地址[i] .longitude;
if（lat == null || lng == null）{
console.log（addresses [i] .name +does not have coordinates）;
} else {
var address = new google.maps.Marker（{
position：{lat：parseFloat（lat），lng：parseFloat（lng）}，
title：地址[i] .name，
map：map //，
// zoom：8
}）;
// bounds.extend（address.position）;
}
}
// map.fitBounds（bounds）;
}
我找不到如何设置它的例子。我已经尝试在这个js文件的每个文本块中放置缩放和设置中心线，但是我找不到可行的公式。
NEXT ATTEMPT
我尝试将我的应用程序javascript include标签移出头标签，并位于application.html.erb中的body标签下方。 p>
现在，我遇到了一个错误：
js？key =在新Eb处https://maps.googleapis.com/m...3HRQVUCYnyAzp46xmXW7WrWrc&callback中的错误键值为：AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc& callback = initMap：95 Uncaught Eb {message：initMap is a function，name：InvalidValueError，stack： = initMap：130：73} message：initMap不是函数名称：InvalidValueErrorstack：新Eb处的错误键（https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc& ; callback = initMap：41：365）Object在Object ._。Fb（https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback= initMap：41：475）↵at Lg（https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:95:420)↵at https://maps.googleapis.com/在Object.google.maps.Load（https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap）下的maps / api / js？key = AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc& callback = initMap：130：58nth ：21：5）↵https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:129:20↵at https://maps.googleapis.com/maps/api/ JS键= AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&安培;回调= initMap：130：73\" __ proto__：ErrorLg @ JS键= AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&安培;回调= initMap：？95（匿名功能）@ JS键= AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&安培;回调= initMap：130google.maps.Load @ js？key = AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc& callback = initMap：21（匿名函数）@ js？key = AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc& ca llback = initMap：129（匿名函数）@ js？key = AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc& callback = initMap：130
kwift.CHROME.min.js：1271 Uncaught语法错误：标识符'findGoodContent'已被声明
我已经看过SO帖子使用角度（我不使用它），这表明添加另一个js文件到视图
任何人都可以帮助解决这个问题吗？
map.fitBounds（）方法自动调整缩放级别，以显示您添加到LatLngBounds中的所有位置。如果您想自己设置缩放级别，请不要使用map.fitBounds（），而应使用map.setZoom（）方法。
https://developers.google.com/maps/documentation/javascript/reference#Map
I have been trying for 4+ years to figure out how to use google maps. Im beyond ecstatic to have finally become able to generate a map wiht the correct address.
This is my javascript.
I'm now struggling with how to set the zoom level. I've tried it in each of the places I've shown below - but none of them work. In each case (regardless of the number I set as the zoom level) I get a really close up map of the specific building.
Can anyone see what I'm doing wrong, or what I need to do in order to get my map to recognise my request for a zoom level? I don't get any js errors showing in the console.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5
});
var bounds = new google.maps.LatLngBounds();
// var opts = {
// zoom: 10,
// max_zoom: 16
// }
var n = addresses.length;
for (var i = 0; i < n; i++) {
var lat = addresses[i].latitude;
var lng = addresses[i].longitude;
if (lat == null || lng ==null){
console.log(addresses[i].name + " doesn't have coordinates");
}else {
var address = new google.maps.Marker({
position: {lat: parseFloat(lat), lng: parseFloat(lng)},
title: addresses[i].name,
map: map //,
// zoom: 8
});
bounds.extend(address.position);
}
}
map.fitBounds(bounds);
}
Note in response to why this question is different to many others asked on SO. I am specifically struggling with how and where to use the features provided in this JS. I can't understand any of the JS I have managed to generate - the version above is the result of 4+ years of effort in trying to learn. I can't take generic ideas in other posts and apply them as easily as others may be capable of doing. Please bear with me as I try to learn to decipher how to communicate with these languages. It's not something that I've been able to grasp readily.
Also, and specifically to the point in the answer you have flagged - maybe the code was good at the point in time the question was asked, but it looks from the google library that the correct expression should be "zoom:4" not setZoom(something). I tried both and can't get either of them to work in my code.
XOMENA'S SUGGESTION
Taking Xomena's suggestion, I tried to define zoom and center in my map function (although I'm not suer if I've done this in the correct place).
This doesnt work. The console shows an error with my js file that says:
Uncaught SyntaxError: Unexpected identifier
Now, my js file has:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
setZoom: 5
setCenter = addresses.first
});
var bounds = new google.maps.LatLngBounds();
// var opts = {
// zoom: 10,
// max_zoom: 16
// }
var n = addresses.length;
for (var i = 0; i < n; i++) {
var lat = addresses[i].latitude;
var lng = addresses[i].longitude;
if (lat == null || lng ==null){
console.log(addresses[i].name + " doesn't have coordinates");
}else {
var address = new google.maps.Marker({
position: {lat: parseFloat(lat), lng: parseFloat(lng)},
title: addresses[i].name,
map: map //,
// zoom: 8
});
// bounds.extend(address.position);
}
}
// map.fitBounds(bounds);
}
I can't find an example of how to set this up to work. I've tried putting the set zoom and set centre lines in each block of text in this js file, but I can't find a formulation that works.
NEXT ATTEMPT
I tried moving my application javascript include tag out of the head tag and beneath the body tags on my application.html.erb.
Now, I have an error that says:
js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:95 Uncaught Eb {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Eb (https://maps.googleapis.com/m…3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130:73"}message: "initMap is not a function"name: "InvalidValueError"stack: "Error↵ at new Eb (https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:41:365)↵ at Object._.Fb (https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:41:475)↵ at Lg (https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:95:420)↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130:58↵ at Object.google.maps.Load (https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:21:5)↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:129:20↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130:73"__proto__: ErrorLg @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:95(anonymous function) @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130google.maps.Load @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:21(anonymous function) @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:129(anonymous function) @ js?key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc&callback=initMap:130
kwift.CHROME.min.js:1271 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
I have seen SO posts form others using angular (i don't use that) which suggest adding another js file to the view where the map is displayed.
Can anyone help solve this for rails where angular is not used?
The map.fitBounds() method adjusts the zoom level automatically to show all locations that you added into LatLngBounds. If you want to set zoom level yourself, don't use map.fitBounds() and use map.setZoom() method instead.
https://developers.google.com/maps/documentation/javascript/reference#Map
这篇关于Google地图 - 如何设置缩放级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
