文章/答案/技术大牛

发布

社区首页 >问答首页 >将单选择更改为多选择Google

问将单选择更改为多选择Google
EN

Stack Overflow用户

提问于 2020-01-30 22:14:39

回答 2查看 524关注 0票数 0

我正在尝试将单个选择框更改为多个选择。我将选择更改为包含多个选择，但当我单击多个选择时，谷歌地图上没有显示任何标记。我很难理解如何将选择绑定到包含位置的站点数组。如何在代码中实现多个选择框？

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



     }
});

multi-select

angularjs

google-maps

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-02-10 14:35:39

我用棱角的Js重写了我的笔，这是链接codemen.io/ueple/完全/ExjaXjL，告诉我你是否还好?或者我错过了什么！:-)

票数 1

Stack Overflow用户

发布于 2020-01-31 07:51:24

在阅读了您的范围之后，我用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"}];

读取这两个数组的函数是

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

问候

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59995312

复制

相似问题

问将单选择更改为多选择Google
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将单选择更改为多选择GoogleEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将单选择更改为多选择Google
EN