我已经尝试了4年多来弄清楚如何使用谷歌地图。我已经超越了欣喜若狂,最终能够通过正确的地址生成地图。
这是我的javascript。
我现在正在努力设置缩放级别。我已经在我在下面显示的每个地方尝试过了 - 但它们都不起作用。在每种情况下(无论我设置为缩放级别的数量),我都会获得特定建筑的非常近距离的地图。
任何人都可以看到我做错了什么,或者我需要做些什么才能让我的地图识别我的缩放级别请求?我没有在控制台中显示任何js错误。
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);
}
请注意为什么这个问题与许多其他人提出的问题不同。我特别挣扎着如何以及在何处使用此JS中提供的功能。我无法理解我设法生成的任何JS - 上面的版本是4年多努力学习的结果。我不能在其他帖子中采用通用的想法,并像其他人可能做的那样轻松地应用它们。当我试图破译如何与这些语言进行交流时,请耐心等待。这不是我能够轻易掌握的东西。
此外,特别是你已经标记的答案中的点 - 也许代码在提出问题的时间点很好,但它从谷歌库看起来正确的表达应该是“zoom:4”没有setZoom(某事)。我尝试了两种方法,无法让它们中的任何一种在我的代码中工作。
XOMENA的建议
考虑到Xomena的建议,我尝试在我的地图功能中定义缩放和居中(虽然如果我在正确的位置完成此操作,我就不会起作用。)
这不起作用。控制台显示我的js文件错误:
Uncaught SyntaxError: Unexpected identifier
现在,我的js文件有:
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);
}
我找不到如何将其设置为工作的示例。我已经尝试在这个js文件中设置每个文本块中的设置缩放和设置中心线,但我找不到有效的配方。
下次尝试
我尝试将我的应用程序javascript include标记移出head标签,并在我的application.html.erb上的body标签下方。
现在,我有一个错误说:
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
我已经看到其他人使用angular(我不使用它)建议其他js文件到显示地图的视图。
任何人都可以帮助解决这个没有使用角度的轨道吗?
答案 0 :(得分:0)
map.fitBounds()方法会自动调整缩放级别,以显示您添加到LatLngBounds中的所有位置。如果您想自己设置缩放级别,请不要使用map.fitBounds()并使用map.setZoom()方法。
https://developers.google.com/maps/documentation/javascript/reference#Map