在 Google 地图 JavaScript Api 中单击时，如何根据结果地点向标记动态添加信息？

Question

我正在尝试根据用户位置自定义我的 google 地图 JS API 代码到 return 附近的药店，并在用户单击其中一个时放置一个框信息药店。我的代码仅适用于呈现附近的药店，但不会在用户单击标记时弹出信息框。

let map;
        let service;
        let infowindow;
        function initialize() {
            infowindow = new google.maps.InfoWindow();
            //Map options
            var options = {
                center: userPosition,
                zoom: 15,
                // disableDefaultUI: true,
            }
            //New map
            map = new
                google.maps.Map(document.getElementById("map"), options);

            var request = {
                location: userPosition,
                radius: '2000',
                query: 'farmacie,spital',
            };

            service = new google.maps.places.PlacesService(map);
            service.textSearch(request, callback);;

            function addUserLocationMarker() {
                marker = new google.maps.Marker({
                    map,
                    draggable: true,
                    animation: google.maps.Animation.DROP,
                    position: userPosition,
                    icon: "http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png"
                });

                marker.addListener("click", toggleBounce);
                var infoWindow = new google.maps.InfoWindow({
                    content: "<h3>My Location ! </h3>"
                });
                marker.addListener('click', function () {
                    infoWindow.open(map, marker);
                });
            }
            addUserLocationMarker();
        }
        function callback(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    var place = results[i];
                    createMarker(results[i]);
                }
            }
        }
    // let markers = [];
        function createMarker(place) {
            var marker = new google.maps.Marker({
                map,
                position: place.geometry.location,
                animation: google.maps.Animation.DROP,
                place:AnimationEffect,
            });
            marker.addListener("click", toggleBounce);
            google.maps.event.addListener(marker, "click", () => {
                infowindow.setContent(place.name);
                infowindow.open(map);
            });
        }

function toggleBounce() {
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

Answer 1

打开InfoWindow on a Marker is .open(map, marker) (assuming the reference to the marker is marker). From the documentation的语法：

open([map, anchor])
Parameters:
map: Map|StreetViewPanorama optional
anchor: MVCObject optional
Return Value: None
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.

（您可以在不包括 anchor 的情况下执行此操作，但如果您使用 .setPosition 设置信息窗口的位置，则仅）

你在 addUserLocationMarker 函数中是正确的，但在 createMarker 函数中是错误的：

function createMarker(place) {
    var marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        animation: google.maps.Animation.DROP,
        place:AnimationEffect,
    });
    marker.addListener("click", toggleBounce);
    google.maps.event.addListener(marker, "click", () => {
        infowindow.setContent(place.name);
        infowindow.open(map);  // <--------------------------
    });
}

应该是：

function createMarker(place) {
    var marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        animation: google.maps.Animation.DROP,
        place:AnimationEffect,
    });
    marker.addListener("click", toggleBounce);
    google.maps.event.addListener(marker, "click", () => {
        infowindow.setContent(place.name);
        infowindow.open(map, marker);  // <--------------------------
    });
}

proof of concept fiddle

代码片段：

let map;
let service;
let infowindow;
let userPosition = {
  lat: 40.7127753,
  lng: -74.0059728
}

function initialize() {
  infowindow = new google.maps.InfoWindow();
  var options = {
    center: userPosition,
    zoom: 15,
  }
  //New map
  map = new
  google.maps.Map(document.getElementById("map"), options);

  var request = {
    location: userPosition,
    radius: '2000',
    query: 'pharmacy',
  };

  service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);;

  function addUserLocationMarker() {
    marker = new google.maps.Marker({
      map,
      draggable: true,
      animation: google.maps.Animation.DROP,
      position: userPosition,
      icon: "http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png"
    });

    marker.addListener("click", toggleBounce);
    var infoWindow = new google.maps.InfoWindow({
      content: "<h3>Locatia mea ! </h3>"
    });
    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    });
  }
  addUserLocationMarker();
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var marker = new google.maps.Marker({
    map,
    position: place.geometry.location,
    animation: google.maps.Animation.DROP,
  });
  google.maps.event.addListener(marker, "click", () => {
    infowindow.setContent(place.name);
    infowindow.open(map, marker);
  });
  marker.addListener("click", toggleBounce);
}

function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Place Searches</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=places&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

在 Google 地图 JavaScript Api 中单击时，如何根据结果地点向标记动态添加信息？

How to add dynamically, based on the result places, information to markers when clicked in Google Maps JavaScript Api?

javascript

google-maps

google-maps-api-3

google-cloud-platform

google-json-api