Question

我无法从一张地图切换到另一张地图。以下是我在离子和角度中使用的代码。

directives.js：

angular.module('starter.directives', [])
.directive('map', function() {
  return {
restrict: 'E',
scope: {
  onCreate: '&'
},
link: function ($scope, $element, $attr) {
  function initialize() {
    var smManila = {lat: 14.5896925, lng: 120.9831071};
    var bayLeaf = {lat: 14.589946, lng: 120.978726};
    var ilustrado = {lat: 14.587795, lng: 120.977454};
    var rizalPark = {lat: 14.583014, lng: 120.979535};


    var mapOptions = {
      center: new google.maps.LatLng(14.5898, 120.9815),
      zoom: 15,
      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;
    });

    var contentsmManila = '<div class="list card">'+
        '<div class="item item-divider item-energized">'+
        '<h2>SM City Manila</h2>'+
        '<h3>Manila, Philippines</h3>'+
        '</div>'+
        '<div class="item item-body">'+
        '<img src="img/SM.jpg" height="120" width="150">'+
        '<p>SM City Manila is the first SM Supermall in the city of Manila. It is located within the corners of Natividad Almeda-Lopez (formerly called Concepcion), A. Villegas (formerly called Arroceros) and San Marcelino Streets in Ermita, Manila just beside the Manila City Hall. The mall features major SM brands like the SM Department Store, SM Supermarket, SM Cinemas & SM Foodcourt. It has a land area of 25,000 m2 (270,000 sq ft) and a total GFA of 167,812 m2 (1,806,310 sq ft).</p>'+
        '<button class="button button-assertive" onclick="smManilaMeet()">'+
        '<b>Invite Friend Here >>></b></button>'
        '</div>';

    var contentbayLeaf = '<div class="list card">'+
        '<div class="item item-divider item-energized">'+
        '<h2>The Bayleaf</h2>'+
        '<h3>Manila, Philippines</h3>'+
        '</div>'+
        '<div class="item item-body">'+
        '<img src="img/Bayleaf.jpg" height="120" width="150">'+
        '<p>The Bayleaf in Intramuros has earned the coveted Trip Advisor’s Travelers’ Choice Award for four years in a row: 2013, 2014, 2015 and 2016. TripAdvisor also awarded the hotel with its prestigious 2013 Certificate of Excellence, placing the hotel in their top-performing 10% of all listed businesses worldwide. TripAdvisor Certificates of Excellence were also awarded for 2014, 2015 and 2016, respectively. In 2012, the hotel got a Gold Circle Award from Agoda.</p>'+
        '<button class="button button-assertive" onclick="">'+
        '<b>Invite Friend Here >>></b></button>'
        '</div>';

    var contentilustrado = '<div class="list card">'+
        '<div class="item item-divider item-energized">'+
        '<h2>Ilustrado</h2>'+
        '<h3>Manila, Philippines</h3>'+
        '</div>'+
        '<div class="item item-body">'+
        '<img src="img/Ilustrado.jpg" height="120" width="150">'+
        '<p>lustrado, the name, refers to the educated, well-travelled Filipinos from the “enlightened” elite class during the Spanish era. Today, Ilustrado, the restaurant, caters to clientele of enlightened tastes. Clients whose palates are conversant in savoring the exotic, cosmopolitan and neo-classic flavors of international and Filipino cuisine. For over 19 years, it has established a name for itself as a fine dining restaurant and favorite wedding venue. It has hosted visiting heads of state such as King and Queen of Spain, President of Peru, President of Czeckoslovakia, King and Queen of Malaysia, Princess of Thailand, a Miss Universe, performing artists and celebrities, and a cardinal’s silver jubilee celebration with over a thousand guests!</p>'+
        '<button class="button button-assertive" onclick="">'+
        '<b>Invite Friend Here >>></b></button>'
        '</div>';

    var contentrizalPark = '<div class="list card">'+
        '<div class="item item-divider item-energized">'+
        '<h2>Rizal Park</h2>'+
        '<h3>Manila, Philippines</h3>'+
        '</div>'+
        '<div class="item item-body">'+
        '<img src="img/Rizal.jpg" height="120" width="150">'+
        '<p>Rizal Park, also known as Luneta National Park or simply Luneta, is a historical urban park in the Philippines. Located along Roxas Boulevard, Manila, adjacent to the old walled city of Intramuros, it is one of the largest urban parks in Asia.</p>'+
        '<button class="button button-assertive" onclick="">'+
        '<b>Invite Friend Here >>></b></button>'
        '</div>';

    var infosmManila = new google.maps.InfoWindow({
      content: '<div class="scrollFix">'+contentsmManila+'</div>'
    });

    var infobayLeaf = new google.maps.InfoWindow({
      content: '<div class="scrollFix">'+contentbayLeaf+'</div>'
    });

    var infoilustrado = new google.maps.InfoWindow({
      content: '<div class="scrollFix">'+contentilustrado+'</div>'
    });

    var inforizalPark = new google.maps.InfoWindow({
      content: '<div class="scrollFix">'+contentrizalPark+'</div>'
    });

    var smManilaMarker = new google.maps.Marker({
      position: smManila,
      map: map,
      title: 'Sm City Manila'
    });

    var bayLeafMarker = new google.maps.Marker({
      position: bayLeaf,
      map: map,
      title: 'The Bayleaf'
    });

    var ilustradoMarker = new google.maps.Marker({
      position: ilustrado,
      map: map,
      title: 'Ilustrado'
    });

    var rizalParkMarker = new google.maps.Marker({
      position: rizalPark,
      map: map,
      title: 'Rizal Park'
    });

    smManilaMarker.addListener('click', function() {
      infosmManila.open(map, smManilaMarker);
      infobayLeaf.close();
      infoilustrado.close();
      inforizalPark.close();

    });
    bayLeafMarker.addListener('click', function() {
      infosmManila.close();
      infobayLeaf.open(map, bayLeafMarker);
      infoilustrado.close();
      inforizalPark.close();
    });

    ilustradoMarker.addListener('click', function() {
      infosmManila.close();
      infobayLeaf.close();
      infoilustrado.open(map, ilustradoMarker);
      inforizalPark.close();
    });

    rizalParkMarker.addListener('click', function() {
      infosmManila.close();
      infobayLeaf.close();
      infoilustrado.close();
      inforizalPark.open(map, rizalParkMarker);
    });

  }

  function smManilaMeet() {
    var mapOptions = {
      center: new google.maps.LatLng(14.5898, 120.9815),
      zoom: 15,
      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;
    });
  }

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

我想要发生的是当我点击contentsmManila中的按钮时，会出现smManilaMeet函数。但事实并非如此。我需要帮助。提前谢谢！

Answer 1

这是一个Angular指令，因此您不能像对待正常情况一样对待它。 1）你不应该使用onclick，你应该使用ng-click。它专门为Angular中的点击事件而制作。 2）您需要做的是修改smManilaMeet（）函数。您希望在HTML中使用的函数应该作为$ scope的函数公开。因此，以下修改应该有所帮助：

<强> 1。修改内容mManila

将onclick="smManilaMeet()"替换为ng-click="smManilaMeet()"。

<强> 2。将smMinilaMeet转换为$ scope函数

＆＃13;

$scope.smManilaMeet = function() {
    var mapOptions = {
      center: new google.maps.LatLng(14.5898, 120.9815),
      zoom: 15,
      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;
    });
  }

＆＃13;

使用角度js谷歌地图中的按钮切换地图

1 个答案: