Изменить одиночный выбор на множественный выбор Google Map API - PullRequest
Новая
       35

Изменить одиночный выбор на множественный выбор Google Map API

0 голосов
/ 31 января 2020

Я пытаюсь изменить одно поле выбора на несколько вариантов выбора. Я изменил выбор, чтобы включить несколько, но когда я нажимаю несколько вариантов, ни один из маркеров не отображается на карте Google. Я борюсь с тем, как связать выборки с массивом сайтов, которые содержат местоположения. Как реализовать поле множественного выбора в коде?

Индекс. html

<!DOCTYPE html>
<html>
  <head>
    <title>Map</title>
    <meta http-equiv="X-UA-Compatible"content="IE=Edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">
    <meta charset="utf-8">

    <link rel="stylesheet" href="CSS/bootstrap.min.css">
    <link rel="stylesheet" href="CSS/style.css">
      </head>
  <div ng-app="mapsApp" ng-controller="MapCtrl">

      <div align ="center" class ="input-w">
          <div class ="gulf">States</div>

   <fieldset>
    <div class = "flexi">
          <label>ISE: </label> 
          <select id ="ISEs" multiple class="dropdown" name="singleSelect" ng-model="data.singleSelect" ng-change="filterMarkers(); centerMap()">
             <option value="0">All</option>
             <option  value="Bob">Bob</option>
             <option value="Sally">Sally</option>

         </select><br><br>
    </div>
</div>
           </fieldset>
        </div> 
    <div id="map"></div>

        <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
    </div>
</div>
<!--
<script src="js/jquery.min.js"></script>  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.25.0/slimselect.min.js"></script>
<script  src="https://code.jquery.com/jquery-3.4.1.min.js"  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="  crossorigin="anonymous"></script> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=myKey"onerror = "googleError()"
></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

Приложение. JS

var sites= [

{name:"ABC",address:"123",lat:"29.97046",lng:"-92.09689",SalesPerson:"Bob"},
{name:"DEF",address:"123",lat:"30.97046",lng:"-92.09689",SalesPerson:"Bob"},
{name:"GHI",address:"123",lat:"31.97046",lng:"-92.09689",SalesPerson:"Sally"},
{name:"JKL",address:"123",lat:"32.97046",lng:"-92.09689",SalesPerson:"Sally"},

];

//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {

        var mapOptions = {
        zoom: 7,
        center: new google.maps.LatLng(32.340803,-89.4855946),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

      $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);

      $scope.markers = [];

    var infoWindow = new google.maps.InfoWindow();
            var icons = {
                Bob: {
                  icon:  { 
                    url: "http://maps.google.com/mapfiles/ms/icons/green-dot.png" 
                 } 
                },
                Sally: {
                    icon:  { 
                      url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png" 
                   } 
                  }
            }

    var createMarker = function (info) {

        var features = [
            {
              position: new google.maps.LatLng(info.lat,info.lng),
              type: info.SalesPerson
            }
        ]
        for (var i =0; i < features.length; i++)
        var marker = new google.maps.Marker({
            map: $scope.map,
            position: features[i].position,
            icon:icons[features[i].type].icon,
            title: info.name,

        });

        marker.content = '<div class="iw-ISE">' + info.ISE + '</div>'
        + '<div class="iw-labels">' + "Contact: "+ info.Contact + '</div>'
       + '<div class="iw-labels">' + "Store Phone: "+ info.Phone + '</div>'
             +'<p>'+ info.address +'</p>'

        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.setContent('<h2 class ="title">' + marker.title + '</h2>' + marker.content);
            infoWindow.open($scope.map, marker);
        });
        $scope.markers.push(marker);
    }

    for (i = 0; i < sites.length; i++) {
        createMarker(sites[i]);
    }

    $scope.openInfoWindow = function (e, selectedMarker) {
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
    }

    $scope.clearMarkers = function() {
      for (var i = 0; i < $scope.markers.length; i++) {
        $scope.markers[i].setMap(null);
      }
      $scope.markers.length = 0;
    }
        $scope.filterMarkers = function() {
       //1.select filtered cities
       var filteredISE;
       var ISEName = $scope.data.singleSelect;
       if(ISEName == '0') {
          filteredISE = sites;
       }
       else {
          filteredISE = sites.filter(function(c){
            if(c.SalesPerson == ISEName)
               return c; 
          });
       }  
       //2.update markers on map
       $scope.clearMarkers();
       for (i = 0; i < filteredISE.length; i++) {
        createMarker(filteredISE[i]);
       }
    }



     }
});

Ответы [ 2 ]

1 голос
/ 10 февраля 2020

Я переписал свою ручку с Angular Js, вот ссылка codepen.io/ueple/full/ExjaXjL, скажите мне, нормально ли это для вас?, Или я что-то пропустил! : -)

1 голос
/ 31 января 2020

После прочтения вашей области я создаю пример в Js, а не Angularjs, но с некоторыми ожидаемыми функциями, я надеюсь, что так. Скажите, поможет ли это вам.

Мой codePen

Я использую массив мест и маркеров, которые читаются с помощью функции initalizeMaps. 

var mapPlaces      = {
                  id1: {town: 'Decines Charpieu', lat: 45.767000, lng: 4.950000, zoom: 14, display: 1},
                  id2: {town: 'Paris', lat: 48.851208, lng: 2.348436, zoom: 10, display: 2},
                  id3: {town: 'New York', lat: 40.748294, lng: -73.985858, zoom: 11, display: 1},
                  id4: {town: 'Rio de Janeiro', lat: -22.974772, lng: -43.185066, zoom: 8, display: 2},
                  id5: {town: 'City of Athena', lat: 37.980549, lng: 23.725121, zoom: 10, display: 1}
                 };

и 

var mapMarkers     = [ 
                   {id: 1,title: 'My town', desc: 'A town of 25000 inhabitants', lat: 45.768811, lng: 4.955300, icon: 'reddot', extraTitle: 'My town Extra Infos', extraDesc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor ante ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean commodo mi nec nisl cursus mollis. Nam tortor elit, suscipit vitae tellus at, suscipit pretium metus. Aenean id ultrices ligula. In non dui et magna placerat semper ut et tellus. Ut purus nulla, malesuada a ante malesuada, rhoncus vulputate diam.', url: "https://www.decines-charpieu.fr/uploads/Image/41/IMF_DIAPORAMA_ACCUEIL/GAB_REFONTE/6313_606_Ville-Cuturel.jpg"}];

И функция для чтения этих 2 массивов: 

function initializeMap(idMap)
google.maps.event.addDomListener(window, 'load', initializeMap( currentMap ));

С уважением

...