Question

这是一个使用Google Maps API的网络应用程序。我创建了一个＆＃34;找到我的位置＆＃34;按钮但是当我点击它时，它给了我这个错误说＆＃34; myLocation不是一个函数＆＃34;我似乎无法找出它为什么会给我这个错误。

var mapDiv = document.getElementById('map');
var myLocation = document.querySelector('#my-location');
var map;
var pos;
var infowindow;
var search_place;

$.get( "http://ip-api.com/json", function(data) {
    pos = new google.maps.LatLng(data.lat, data.lon);
    initMap();
  });

function initMap() {
  map = new google.maps.Map(mapDiv, {
    zoom: 15,
    center: pos,
    mapTypeControl: false
  });

  // Marker for the user's current location on the map
  var curr_marker = new google.maps.Marker({
    position: pos,
    map: map,
    draggable: false,
   animation: google.maps.Animation.DROP
  });

  // Info window for nearby places
  infowindow = new google.maps.InfoWindow();

  //Search nearby restaurants and display them on the map
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: {lat: pos.lat(), lng: pos.lng()},
    radius: 1000,
    type: ['restaurant']
  }, callback);

  // Marker for the place searched by the user
  var search_marker = new google.maps.Marker({
    map: map,
    animation: google.maps.Animation.DROP
  });

  // Auto complete for the search field
  var input = document.getElementById('pac-input');
  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  // Display the place searched and put a marker and info window on that spot
  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    search_marker.setVisible(false);
    search_place = autocomplete.getPlace();
    if (!search_place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    } else {
      map.fitBounds(search_place.geometry.viewport);
      map.setCenter(search_place.geometry.location);
      map.setZoom(17);
    }
    // Custom marker icon
    // search_marker.setIcon(/** @type {google.maps.Icon} */({
    //   url: search_place.icon,
    //   size: new google.maps.Size(71, 71),
    //   origin: new google.maps.Point(0, 0),
    //   anchor: new google.maps.Point(17, 34),
    //   scaledSize: new google.maps.Size(35, 35)
    // }));
    search_marker.setPosition(search_place.geometry.location);
    search_marker.setVisible(true);

    var address = '';
    if (search_place.address_components) {
      address = [
        (search_place.address_components[0] && search_place.address_components[0].short_name || ''),
        (search_place.address_components[1] && search_place.address_components[1].short_name || ''),
        (search_place.address_components[2] && search_place.address_components[2].short_name || '')
      ].join(' ');
    }

    search_marker.addListener('click', function() {
      slideLeft.open();
      infowindow.setContent('<div><strong>' + search_place.name + '</strong><br>' + address);
      infowindow.open(map, search_marker);
    });
    infowindow.setContent('<div><strong>' + search_place.name + '</strong><br>' + address);
    infowindow.open(map, search_marker);
  });

  // Info window of user's current location
  var youAreHere = '<div id="content">'+
      '<h3>' + 'This is you!' + '</h3>' +
      '</div>';

  curr_marker.addListener('click', function() {
    infowindow.setContent(youAreHere);
    infowindow.open(map, curr_marker);
  });
  curr_marker.setMap(map);
  infowindow.setContent(youAreHere);
  infowindow.open(map, curr_marker);

  myLocation.addListener('click', function() {
    // infowindow.setPosition(pos);
    // infowindow.setContent(youAreHere);
    // map.setCenter(pos);
    window.alert("Locating...");
  });
}

这是HTML：

<div id="wrapper">
            <header class="header">
            <nav class="header-nav">
                <div id="hamburger-menu" class="slider"></div>
                <input id="pac-input" class="controls" type="text" placeholder="Search Maps">
                <div id="my-location"><i class="fa fa-location-arrow" aria-hidden="true"></i></div>
            </nav>
          </header><!--header -->
            <main class="content">
            <div class="container">
                <div id="map"></div>
            </div><!-- container -->
          </main><!-- content -->
         </div><!-- wrapper -->

Answer 1

您需要将addEventListener用于DOM节点，addListener专门用于Maps JavaScript API对象。

myLocation.addEventListener('click', function() {
  // infowindow.setPosition(pos);
  // infowindow.setContent(youAreHere);
  // map.setCenter(pos);
  window.alert("Locating...");
});

JavaScript未捕获错误：xxx不是函数

1 个答案: