Question

我已经尝试了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文件到显示地图的视图。

任何人都可以帮助解决这个没有使用角度的轨道吗？

Answer 1

map.fitBounds（）方法会自动调整缩放级别，以显示您添加到LatLngBounds中的所有位置。如果您想自己设置缩放级别，请不要使用map.fitBounds（）并使用map.setZoom（）方法。

https://developers.google.com/maps/documentation/javascript/reference#Map

Google地图 - 如何设置缩放级别

1 个答案: