Question

我正在使用KnockoutJS库开发一个简单的Google Maps应用程序 - 或者至少在概念上看起来很简单。在阅读了KnockoutJS并编写了一些示例之后，我将初始部分放在一起。到目前为止html只是地图，我的目标是在我克服第一道障碍后立即填充列表。障碍在于Javascript。以下是供参考的代码：

"use strict";

var map;
var center;
var defaultBounds;
var placesServices;

//LocationObject created to hold data for locations generated from google.places.nearbySearch
var LocationObject = function(data){

    this.position = data.geometry.location;
    this.lat = data.geometry.location.lat;
    this.lng = data.geometry.location.lng;
    this.name = data.name;
    this.placeID = data.place_id;
    this.rating = data.rating;
    this.types = data.types;
    this.linkToPhoto = data.html_attributions;

};



function initMap(){

    map = new google.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 17,
        mapTypeId: 'satellite',
        draggable: true, 
        zoomControl: false, 
        scrollwheel: true, 
        disableDoubleClickZoom: true
    });

    defaultBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(47.614217, -122.317981),new google.maps.LatLng(47.612975, -122.316291));
    map.fitBounds(defaultBounds);

    placesServices = new google.maps.places.PlacesService(map);

}


    //ViewModel created to observe changes on the map
var MapViewModel = function(){
    var self = this;

    self.testarr = ko.observableArray([
        { firstName: 'Bert', lastName: 'Bertington' },
        { firstName: 'Charles', lastName: 'Charlesforth' },
        { firstName: 'Denise', lastName: 'Dentiste' }
    ]);

    self.locations = ko.observableArray([]);
    self.markers = [];

    this.getNearbyLocations = function(){
        if(placesServices === undefined){
            placesServices = new google.maps.places.PlacesService(map);
        }

        var request = {
            location: center,
            radius: getBoundsRadius(defaultBounds),
            type: ['establishment']
        };

        placesServices.nearbySearch(request, function(results, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i <= 18; i++) {
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[i].geometry.location,
                        animation: google.maps.Animation.DROP
                    });
                    self.locations.push(new LocationObject(results[i]));
                    self.markers.push(marker);
                }
            } else{
                alert("We were not able to find any nearby locations in this Neighbourhood.");
            }
        });
    };

    this.init = function(){

        self.getNearbyLocations();

    };
};


var myMapViewModel = new MapViewModel();
myMapViewModel.init();
ko.applyBindings(myMapViewModel);   



/* Utility Functions */
function getBoundsRadius(bounds){....}

错误是：

Uncaught ReferenceError: google is not defined
at MapViewModel.getNearbyLocations

我不知道为什么它在这里没有得到认可，当地图本身首先加载而没有问题但是在这里它被挂断了。

这是html供参考，但那里不应该是一个问题：

<!DOCTYPE html>
<html lang="en">
  <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   <!-- Per Google guideline scheduled for the M65 release, css has been moved to an importer -->
   <link rel="import" href="importer.htm"></link>

   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">


  </head>
  <body>
   <div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <!-- List goes in this column. -->

            </div>
        </div>
        <div class="col-xs-12 col-md-8">
            <!-- Map goes into this column. -->
            <div id="map" style="width:100%;height:100vh;"></div>
        </div>
      </div>
     </div>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!-- Optional JavaScript -->
<script src="js/knockout.js" ></script>
<script src="js/app.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-1EdIyUOb74oGG_mEoPvJTAGCSJvSQms&callback=initMap&libraries=places"></script>
 </body>

Answer 1

我还认为错误是因为你的app.js是在map脚本之前被调用的。但我尝试更改它，同样的错误，我也尝试删除async参数（由user3297291评论建议），仍然是同样的错误。从理论上讲，它是should have worked。

但是这样做了 - 将app.js代码的最后3行包装在ready()函数中：

$(document).ready(function(){
    var myMapViewModel = new MapViewModel();
    myMapViewModel.init();
    ko.applyBindings(myMapViewModel); 
});

KnockoutJS中的ViewModel无法访问全局变量

1 个答案: