将单个 Select 更改为多个 Select Google 映射 API

Question

我正在尝试将单个 select 框更改为多个 select。我将 select 更改为包含多个，但是当我单击多个 select 离子时，none 个标记会显示在 Google 地图上。我正在为如何将 selections 绑定到包含位置的站点数组而苦苦挣扎。如何在代码中实现多 select 框？

Index.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>

App.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]);
       }
    }



     }
});

Answer 1

阅读您的范围后，我在 Js 中创建了一个示例，不像 Angularjs，但具有您期望的一些功能，我希望如此。告诉我是否对你有帮助。

My 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"}];

读取这两个数组的函数是

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

此致

Answer 2

我用 Angular Js 重写了我的笔，这是 link codepen。io/ueple/full/ExjaXjL，告诉我你觉得合适吗？或者我有什么东西'我错过了！ :-)

将单个 Select 更改为多个 Select Google 映射 API

Change Single Select to Multiple Select Google Map API

angularjs

google-maps

multi-select