Javascript 谷歌地图-显示信息窗口（angularjs）

我想知道你是否能帮我。通过angular js v1，我的网页中嵌入了一张地图，其中：

• 允许用户输入起点和终点
• 打印标记并显示路线（起点和终点）
• 显示起点、目的地和中间航路点的航路点（作为标记）。（所以有3点，我不会过度使用谷歌api请求/限制

问题： 当我点击我的标记时，我的信息窗口不会出现。 默认情况下，它似乎很自然地出现在“起点”和“终点”中，但我不知道如何使它们出现在所有显示为标记的餐厅中。（使用PlaceSearch搜索此项）

我在谷歌上搜索了很多，但由于我是JS/Angular的新手，我想不出最好的方法

下面是我的指令代码，还有一些信息窗口代码，但正如你所看到的，我被难住了。不确定我是否需要一个点击处理程序

    googleMap.$inject = [];
     function googleMap() {

    return {
     restrict: 'E',
     template: '<div class="google-map"></div>',
     replace: true,
     scope: {
       center: '=',
       zoom: '=',
       origin: '=',
       destination: '=',
       travelMode: '='
    },

    link($scope, $element) {
      const map = new google.maps.Map($element[0], {
        zoom: $scope.zoom,
        center: $scope.center
      });

      const directionsService = new google.maps.DirectionsService();
      const directionsDisplay = new google.maps.DirectionsRenderer();
      const placesService = new google.maps.places.PlacesService(map);
      // const infoWindows = [];
      // const infowindow = new google.maps.InfoWindow();
      // let marker = new google.maps.Marker;

      directionsDisplay.setMap(map);

      $scope.$watch('center', () => map.setCenter($scope.center), true);

      $scope.$watchGroup(['origin', 'destination', 'travelMode'], 
    displayRoute);

      // DISPLAY ROUTE
      function displayRoute() {
        if(!$scope.origin || !$scope.destination || !$scope.travelMode) 
    return false;

        directionsService.route({
          origin: $scope.origin,
          destination: $scope.destination,
          travelMode: $scope.travelMode
        }, (response) => {

          directionsDisplay.setDirections(response);

          // beginning of this form
          // response.routes[0].legs[0].steps.map(step => {
          const steps = response.routes[0].legs[0].steps
          const lookup = [steps[0], steps[Math.round(steps.length / 2)], 
          steps[steps.length - 1]]
          lookup.map(step => {


            placesService.nearbySearch({
              location: step.start_point,
              radius: 50,
              type: ['restaurant'],
              openNow: true
            }, (results) => {
              results.map(place => {
                console.log(place.name);
                return new google.maps.Marker({
                  map: map,
                  position: place.geometry.location,
                  // label: '⭐️',
                  title: place.name
                });  //google maps marker
              });

              results.map(place => {
                console.log(place.vicinity);
                const contentString = place.name;
                return new google.maps.InfoWindow({
                  title: place.name,
                  content: contentString
                });  //google maps marker
                // infoWindows.push(infowindow);
              });


            });
          }); //end of this function

        });  //end return directionsdisplay
      }  //display route ends


    } //link scope ends
  };
}

export default googleMap;

googleMap.$inject=[]；
函数googleMap（）{
返回{
限制：'E'，
模板：“”，
替换：正确，
范围：{
中心：'='，
缩放：'='，
来源：'='，
目的地：'='，
travelMode:“=”
},
链接（$scope$element）{
const map=new google.maps.map（$element[0]{
zoom:$scope.zoom，
中心：$scope.center
});
const directionsService=new google.maps.directionsService（）；
const directionsDisplay=new google.maps.DirectionsRenderer（）；
const placesService=新的google.maps.places.placesService（map）；
//const infoWindows=[]；
//const infowindow=new google.maps.infowindow（）；
//让marker=new google.maps.marker；
方向显示.setMap（地图）；
$scope.$watch（'center'，（）=>map.setCenter（$scope.center），true）；
$scope.$watchGroup（['origin'，'destination'，'travelMode']，
显示路线）；
//显示路线
函数displayRoute（）{
if（！$scope.origin | |！$scope.destination |！$scope.travelMode）
返回false；
方向服务.路线({
来源：$scope.origin，
目标：$scope.destination，
travelMode:$scope.travelMode
}，（回应）=>{
方向显示。设置方向（响应）；
//此表格的开头
//response.routes[0]。legs[0]。steps.map（step=>{
常量步骤=响应。路由[0]。支腿[0]。步骤
常量查找=[steps[0]，steps[Math.round（steps.length/2）]，
步数[steps.length-1]]
lookup.map（步骤=>{
placesService.nearby搜索({
位置：步骤开始点，
半径：50，
类型：[“餐厅”]，
openNow：是的
}，（结果）=>{
results.map（place=>{
console.log（place.name）；
返回新的google.maps.Marker({
地图：地图，
位置：place.geometry.location，
//标签：'⭐️',
标题：place.name
})；//谷歌地图标记
});
results.map（place=>{
控制台。日志（位置。附近）；
const contentString=place.name；
返回新的google.maps.InfoWindow({
标题：place.name，
内容：contentString
})；//谷歌地图标记
//推送（infowindow）；
});
});
})；//此函数的结尾
})；//结束返回方向显示
}//显示路由结束
}//链接作用域结束
};
}
导出默认谷歌地图；

---

谢谢！

一种方法是创建信息窗口和标记，然后绑定单击事件以打开/关闭信息窗口-

    var marker = new google.maps.Marker({
        position: latlng,
        map: mapObject,
        title: "MARKER"
    });

    var infoWindow = new google.maps.InfoWindow({
        content: "<h1>Hello World</h1>"
    });

    google.maps.event.addListener(marker, "click", function () {

         infoWindow.open(mapObject, marker);

    });

var marker=new google.maps.marker({
位置：latlng，
map:mapObject，
标题：“标记”
});
var infoWindow=new google.maps.infoWindow({
内容：“你好，世界”
});
google.maps.event.addListener（标记“单击”，函数（）{
打开（mapObject、marker）；
});

编辑-在您的情况下，您正在打印一个标记数组/列表，每个标记都有自己的信息窗口-因此您可以将标记（结果）代码的打印更改为如下内容：

注意：未使用编译器，可能包含语法错误

// keep reference of plotted markers, so we can clear them if required
var markers = [];

for (var i = 0; i < results.length; i++) {

    var place = results[i];

    // create marker    
    var marker = new google.maps.Marker({
      map: mapObject,
      position: place.geometry.location,
      title: place.name
    });

    // create info window
    var infoWindow = new google.maps.InfoWindow({
      content: ''
    });

    //adding an extra property to marker, (infoWindow - so we can get it inside click event of marker
    marker.infoWindow = infoWindow;

    // click event handler
    google.maps.event.addListener(marker, "click", function() {

        // this == marker 
        var map = this.infoWindow.getMap();

        if (map !== null && typeof map !== "undefined")
            this.infoWindow.close();
        else {
            // open info window at marker position
            this.infoWindow.open(mapObject, this);
        }
    });
    markers.push(marker);
}

//保留打印标记的引用，以便在需要时清除它们
var标记=[]；
对于（var i=0；i

这太完美了，非常感谢Dawood。第一个解决方案实际上非常有效。干杯！