Question

SPOILER ALERT：我的代码中有一个拼写错误。

以下代码成功显示初始地图，并在纬度/经度设置下显示初始标记。

当我点击地图时，我尝试添加一个侦听器来放置一个新标记，但似乎没有任何事情发生。我尝试在标记上显示InfoWindow，但由于标记未显示InfoWindow显示在左上角。

我正在使用http://maps.googleapis.com/maps/api/js：

function initialize() {
    var mapProp = {
        center: new google.maps.LatLng(45.8590, -122.8158),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    map = new google.maps.Map(document.getElementById('googleMap'), mapProp);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(45.8590, -122.8158),
        animation: google.maps.Animation.DROP,
        map: map,
    });
    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });
    function placeMarker(location) {
        var subMarker = new google.maps.Marker({
            postion: location,
            map: map,
        })
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

我做错了什么？

Answer 1

postion: location中有new Marker(...)，position。{/ p>

原始答案：

你调用函数placeMarker(event.latlng);但是应该有两个参数：map和location，如定义。 function placeMarker(map, location) { ... }，
event.latlng应为event.latLng。

可能的解决方案之一可能是这样的： google.maps.event.addListener(map, 'click', function(event) { placeMarker(map, event.latLng); });

您可以在documentation中看到示例。

Answer 2

您有一个拼写错误：postion

} position应为

function initialize() {
  var mapProp = {
    center: new google.maps.LatLng(45.8590, -122.8158),
    zoom: 9,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  var map = new google.maps.Map(document.getElementById('googleMap'), mapProp);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(45.8590, -122.8158),
    animation: google.maps.Animation.DROP,
    map: map,
  });
  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });

  function placeMarker(location) {
    var subMarker = new google.maps.Marker({
      position: location,
      map: map,
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

代码段

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>

import java.util.Scanner;
import java.util.ArrayList;
public class contactDriver {
  public static void main(String[] args) {
      String first; //first name
      String last; //last name
      String phone = ""; //phone number
      String input; //answer to create a new contact

      boolean add = true; //boolean to add new contact
      boolean phoneValid; //boolean to validate phone number

      Scanner scan = new Scanner(System.in);

      ArrayList < Contact > PhoneBook = new ArrayList < > ();

      while (add) {
        phoneValid = false;

        System.out.println("Type (N) to add a new contact, (D) to display your phonebook, or (Q) to quit!");
        input = scan.nextLine();
        if (input.equalsIgnoreCase("N")) {
          System.out.println("Enter the contact's first name: ");
          first = scan.nextLine();

          System.out.println("Enter the contact's last name: ");
          last = scan.nextLine();

          while (!phoneValid) {
            System.out.println("Enter the contact's phone number: XXX-XXX-XXXX");
            phone = scan.nextLine();
            if (phone.matches("\\d{3}[-\\.\\s]\\d{3}[-\\.\\s]\\d{4}")) {
              phoneValid = true;
              break;
            } else {
              System.out.println("Sorry, I didn't catch that!");
            }
          }

          Contact contact = new Contact(first, last, phone);
          PhoneBook.add(contact);
        } else if (input.equalsIgnoreCase("Q")) {
          add = false;
          System.out.println("Goodbye!");
          break;
        } else if (input.equalsIgnoreCase("D")) {
          for (Contact c: PhoneBook) {
            System.out.println(c);
          }
        } else {
          System.out.println("Sorry, I didn't catch that!");
        }
      }
    } //end main
} //end Class ComputerDriver

通过侦听器事件放置时，Google地图标记不会显示

2 个答案: