Question

我一直在努力让这项工作相当长一段时间。所以，这就是我想要实现的目标。

使用群集映射。
群集标记应该是自定义的。
点击标记打开自定义信息页。

我设法做的事情是：

使用自定义群集映射。
自定义信息窗。

我面临的问题是：

onClick会创建默认标记，而不是自定义标记。
我无法为每个标记指定唯一的id，以便在标记正上方打开信息窗口。
即使我手动添加id's，infowindow也会从标记处稍微打开。

为了清楚地了解我想要实现的目标，我将添加一个我想要实现的设计图像。

以下代码适用于我的本地，但出于某种原因ng-non-bindable导致以下代码段中出现问题。

＆＃13;

var app = angular.module('myApp', ['ngMap']);

app.controller('mapController', function($http, $scope, $interval, NgMap) {
  $scope.positions = [];
  $scope.dynMarkers = [];


  $scope.allProperties = [{
      "title": "Unit 25",
      "latitude": 54.779951,
      "longitude": 9.334164
    },
    {
      "title": "Unit 21",
      "latitude": 47.209613,
      "longitude": 15.991539
    },
    {
      "title": "Unit 41",
      "latitude": 51.97539,
      "longitude": 7.596962
    },
    {
      "title": "Unit 87",
      "latitude": 54.779951,
      "longitude": 9.334164
    },
    {
      "title": "Unit 59",
      "latitude": 47.414847,
      "longitude": 8.23485
    },
    {
      "title": "Unit 70",
      "latitude": 47.658028,
      "longitude": 9.159596
    },
    {
      "title": "Unit 9",
      "latitude": 47.525927,
      "longitude": 7.68761
    },
    {
      "title": "Unit 31",
      "latitude": 50.85558,
      "longitude": 9.704403
    }
  ];


  NgMap.getMap('propertyMap').then(function(map) {
    var bounds = new google.maps.LatLngBounds();
    for (var k in map.customMarkers) {
      var cm = map.customMarkers[k];
      $scope.dynMarkers.push(cm);
      bounds.extend(cm.getPosition());
    };

    $scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, {
      imagePath: ''
    });
    map.setCenter(bounds.getCenter());
    map.fitBounds(bounds);

    $scope.sameLocationUnits = function(event, unit) {
      $scope.map.showInfoWindow('propertyInfoWindow', unit.id);
      $scope.unitInfo = unit;
    };
  });
});

＆＃13;

.ng-map-info-window {
	width: 300px !important;
  background-color: #181818;
  color: #fff;
  padding: 10px 20px !important;
  border-radius: 2px;
}
.ng-map-info-window div:first-child > div:nth-child(1) {
  	border-top-color: #181818 !important;
  	border-right: 20px solid transparent !important;
  	border-left: 20px solid transparent !important;
}

.ng-map-info-window div:first-child > div:nth-child(2) {
	width: 235px !important;
	max-width: 235px !important;
}

.gm-style .gm-style-iw {
	width: 275px !important;
	max-width: 275px !important;
}

.gm-style .gm-style-iw > div:first-child {
	width: 280px !important;
	max-width: 280px !important;
	position: relative;
    left: -8px;
    overflow-x: hidden !important;
}
.ng-map-info-window div:first-child > div:nth-child(3) div {
  display: none;
}
.ng-map-info-window div:first-child > div:nth-child(4) {
  display: none;
}

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places&key=AIzaSyBK9qfMYJ2vud1uiSMOJKu0A643trmBei0"></script>
  <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markerclusterer.js"></script>
  <link href="custom-marker.css" rel="stylesheet" />
  <script src="app.js"></script>
</head>

<body ng-controller="mapController">
  <ng-map center="[40.74, -74.18]" zoom="8" id="propertyMap">
    <custom-marker ng-repeat="property in allProperties" id="custom-marker-{{$index}}" position="[{{ property.latitude }},{{ property.longitude }}]" on-click="sameLocationUnits(event, property)">
      <i class="map-marker"></i>
    </custom-marker>
    <info-window id="propertyInfoWindow">
      <div ng-non-bindable>
        <p>{{unitInfo.title}}</p>
      </div>
    </info-window>
  </ng-map>
</body>

</html>

＆＃13;

Answer 1

为了将MarkerClusterer与ngMap结合起来，你应该删除指令和你使用markers数组的方式;而是创建一个标记数组（google.maps.Marker类型的项目）;然后通过MarkerClusterer对象在地图上初始化标记。关于如何使用该功能的简单而完美的文章在这里a link！

AngularJS - ngMap自定义标记clusterer map + infowindow

1 个答案: