Question

我正在尝试使用包含位置详细信息的JSON数组在google map javascript（v3）上显示infowindow。但是如何在点击地图上的每个标记时显示infowindow？。

JSON数组

 var details=[
{
    Name : 'Hotel1',
    desc : 'This is the best hotel in the world!',
    lat : 43.7000,
    long : -79.4000
},
{
    city : 'Hotel2',
    desc : 'This is the best hotel!',
    lat : 40.6700,
    long : -73.9400
}                    
             ];

directive.js

.directive('map', function() {
  return {
    restrict: 'E',
    scope: {
      onCreate: '&'
    },
    link: function ($scope, $element, $attr) {
      function initialize() {

        var myLatlng = new google.maps.LatLng(9.378389, 76.745506);     
        var mapOptions = {
          center: new google.maps.LatLng(9.378389, 76.745506),
          zoom: 1,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map($element[0], mapOptions);

        $scope.onCreate({map: map});
        // Stop the side bar from dragging when mousedown/tapdown on the map
        google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
          e.preventDefault();
          return false;
        });
        /*display one marker
      i want dispaly this in loop and  on-click on marker will display an infowindow 
    */
            var latLng = new google.maps.LatLng(9.378389, 76.745506);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map,
                title:'Hello world'
            });

      }
      if (document.readyState === "complete") {
        initialize();
      } else {
        google.maps.event.addDomListener(window, 'load', initialize);
      }
    }
  }
});

Answer 1

如果您使用的是cordova / phonegap，则可以使用插件。这是我们使用的那个： https://github.com/wf9a5m75/phonegap-googlemaps-plugin

安装可能有点棘手，但它可以满足您的需求。我们在针对iOS和Android的项目中使用它。

Answer 2

下面是点击地图上每个标记时显示InfoWindow的方法。

// Define New Marker
var marker = new google.maps.Marker({
  position: new google.maps.LatLng(9.378389, 76.745506),
  title: 'Hello world'
});

// Define New InfoWindow object
var infoWindow = new google.maps.InfoWindow({
  content: 'Content of Hello world'
});

// Define Content for InfoWindow
var infoWindowContent = '<div>' + '<h3>Hello world</h3>' + '</div>';

// Place the Defined New Marker on the map
marker.setMap(map);

// Listen for a Click Event on the Marker to trigger display of the New InfoWindow
var handleMarker = google.maps.event.addDomListener(marker, 'click', function () {
  // Set the content of the InfoWindow
  infoWindow.setContent(infoWindowContent);
  // Add InfoWindow to map
  infoWindow.open(map, marker);
  return false;
});

使用angularjs单击标记时显示Google地图信息窗口

2 个答案: