标签: markerclusterer

我的目标是为我的 Google 地图标记集群提供纯CSS图标。我在文档的“高级示例”（链接）中看到，纯 CSS 图标是可能的。然而，我一直无法将这个例子转化为我自己的项目。

我尝试用我的代码构建一个 JSFiddle，但由于 API 限制，我似乎无法通过 JSFiddle 初始化地图。当我在网站上运行代码时，它会向地图添加数字，但没有图标，如下所示。

我创建了一些样式

  var styles = [{
      width: 30,
      height: 30,
      className: "custom-clustericon-1",
    },
    {
      width: 40,
      height: 40,
      className: "custom-clustericon-2",
    },
    {
      width: 50,
      height: 50,
      className: "custom-clustericon-3",
    },
  ];

我尝试像这样初始化：

var markerCluster = new MarkerClusterer(map, markers,
            {
                styles: styles,
                clusterClass: "custom-clustericon", 
            });

我在哪里错过了标记？我希望拥有与“高级示例”中的标记图标完全相同的标记图标，但我不知所措。我在网上广泛搜索了仅css 图标的示例，但找不到任何独立的示例。非常感谢您的帮助。

我按如下方式使用地图，但这不起作用

<google-map #googleMap width="100%" height="100%" (idle)="initClusterer($event)">
  <map-marker-clusterer *ngIf="googleMap?.googleMap">
    <ng-container *ngFor="let i of items">
      <ng-container *ngIf="i.categories | haveCategory: targetCategory">
        <map-marker #markerElem [position]="i.position"> </map-marker>
      </ng-container>
    </ng-container>
  </map-marker-clusterer>
</google-map>

import { MarkerClusterer } from '@googlemaps/markerclusterer'

//...

@ViewChild('googleMap', { static: true }) googleMap: GoogleMap
markerCluster?: MarkerClusterer

// ...

initClusterer(e) {
    console.log('initClusterer', e)
    if (!this.googleMap?.googleMap || this.markerCluster) return

    console.log(this.googleMap, this.googleMap.googleMap)
    this.markerCluster = new MarkerClusterer({
      map: this.googleMap.googleMap,
      markers: this.markerElem,
    })
}

我确实下载了以下依赖项 npm i @googlemaps/markerclusterer
npm i @types/google.maps --save-dev

而不是markerclustererplus，因为它已被弃用。

但我收到以下错误。

vendor.js:91237 ERROR Error: MarkerClusterer class …

我正在使用信息框插件创建具有不同内容的多个标记 - http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/infobox-basic.html

此外,我使用markerclusterer插件在同一区域处理太多标记 - http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js

所有标记都正确显示,聚类工作完美.

问题.我的问题是我怎么才能点击一个信息框并关闭其他信息框,如果你选择另一个,它会打开并关闭其他信息框.

这是我目前的代码[ 更新 ]:http://jsfiddle.net/henrichro/mqrrA/

<script type="text/javascript" src="<?php echo get_bloginfo('template_directory'); ?>/js/markerclusterer.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js"></script>
<script type="text/javascript">
// build portfolios list
var portfolios = [
    <?php
    global $post;
    $type = 'portfolio';
    $args = array(
        'post_type' => $type,
        'post_status' => 'publish',
        'posts_per_page' => -1,
        'caller_get_posts'=> 1
    );
    $my_query = null;
    $my_query = new WP_Query($args);
    if( $my_query->have_posts() ) {
        while ($my_query->have_posts()) : $my_query->the_post();
        $my_id = get_the_ID();
        $my_title = get_the_title($my_id);
        $my_permalink = get_permalink($my_id);
        $site_type …

我是IOS技术的新手.我一直在开发一个应用程序,我必须在我的地图上添加大约10,000个mkannotations.所以我更喜欢使用聚类算法(可能使用k_means).但是,我在(https://www.cocoacontrols.com/controls/adclustermapview)找到了这个漂亮的外部库.

当我编译这个项目的示例框架并在模拟器上运行时,一切正常,但是,当我按照他们的描述将所需文件添加到我的项目时,它会引发很多错误.

retain
release etc.

所以我理解项目中的弧兼容性存在一些问题

这是我的问题

1. 这些保留,释放方法在某些项目中使用,是否意味着它们是使用旧版本的IOS开发的？
2. 如果是这样,除了手动删除它们之外,我该如何解决这些错误？
3. 在IOS中是否有一个方法,它允许我使用一个编译器部分编译代码而其余的使用其他编译器？

我昨天对这篇文章没有得到足够的重视,但在做了一些研究之后,我想知道如何将信息框放置在google标记上而不是在pin上,但是当你将鼠标悬停在一组标记上时,类似于这个网站信息框显示在同一点,因此不会触发mouseout事件,因为鼠标仍在标记组上.我想知道如何通过昨天的帖子实现类似的功能.所以要结束帖子,有没有我可以应用的样式代码,所以我可以在标记上显示信息框？非常感谢每一条建议.谢谢,Laziale

<script>
    var lat = "";
    var map = "";
    var markers = [];
    function initMap() {
        if ($("#map").length) {
            var mapOptions = {
                zoom: 13, 
                center: new google.maps.LatLng(37.498214, 127.027535), 
                scrollwheel: true, 
                mapTypeControl: false 
            };
            var geocoder = new google.maps.Geocoder();
            map = new google.maps.Map(document.getElementById('map'), mapOptions); 
            var image = 'img/marker.png'; 
            for (i = 0; i < 1; i++) { // this database size
                var address = 'addressvalue';
                geocoder.geocode({'address': address}, function (results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        lat = results[0].geometry.location;
                        lat …

我使用Google Maps Javascript API创建了html页面.此地图显示geojson文件中的标记.一切都很好.我想添加标记聚类.但由于某种原因,这不起作用.我对Javascript不太满意.请告诉我如何更改我的代码.

var map;
function initMap() {

  var styleArray = [
    {
      featureType: 'all',
      stylers: [
        { saturation: -80 }
      ]
    },{
      featureType: 'road.arterial',
      elementType: 'geometry',
      stylers: [
        { hue: '#00ffee' },
        { saturation: 50 }
      ]
    },{
      featureType: 'poi.business',
      elementType: 'labels',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];

  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(42.34, -71.05),
    styles: styleArray
  };

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


  // Load GeoJSON.
  map.data.loadGeoJson('/map.geojson');

  map.data.setStyle(function(feature) {
    return {icon:feature.getProperty('icon')}; …

我添加了 4 个位置，当页面加载并缩小时，它们将聚集成 4 个一组。

我添加了一个单击事件来向地图添加标记。我无法让这些添加的标记成为标记簇，就像我放入脚本中的 4 个位置一样。

我怎么做？

<div id="mapContainer">
  <div id="map"></div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCbdYz0sVFHyKAMVP051D_UI1PsbxQ92n8&callback=initMap"></script>
<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {lat: 33.034405, lng: -117.292928}
    });
    // Create an array of alphabetical characters used to label the markers.
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an …

我正在开发一个应用程序，我想在该应用程序上在地图上显示很多事件。用户可以单击一个事件并查看有关它的大量信息。在另一个视图中，用户可以创建一个新事件，然后将位置和标题存储在 Firebase 数据库中。然后当其他用户在我的应用程序上观看 GoogleMaps 时，他们能够看到在地图中作为标记的所有事件。当用户在地图上缩小时，我想从 Firebase 中聚类标记，但它无法工作，可能是因为我在 Firebase 上加载数据标记的方式。有 3 个问题： - 我无法将我的自定义标记与橙色聚集在一起。- 地图加载时不会出现标记和集群图标，我需要先放大或缩小 - 我希望标记的数据显示在信息窗口中，但我必须为 GoogleMap 和 Firebase 上对应的标记使用正确的数据。- 当我点击集群图标时，它也会显示 alertController，但我只想在用户点击不在集群图标上的标记时看到 alertController。

这是我当前的代码：

class POIItem: NSObject, GMUClusterItem {
var position: CLLocationCoordinate2D
var name: String!

init(position: CLLocationCoordinate2D, name: String) {
    self.position = position
    self.name = name
}
}

class NewCarteViewController: UIViewController, GMSMapViewDelegate, CLLocationManagerDelegate, GMUClusterManagerDelegate {

var locationManager = CLLocationManager()
var positionActuelle = CLLocation() // Another current position
var currentPosition = CLLocationCoordinate2D()
var latiti: CLLocationDegrees!
var longiti: CLLocationDegrees!

private var clusterManager: …

我有一个Google Maps Clustering的工作代码笔演示。我正在尝试添加自定义 html 元素标记，以便我可以拥有像这样的动态文本：

但是，当我将我的自定义 html 元素标记脚本（它自己工作）添加到我的标记集群脚本时 - 它会中断。

这是我的脚本。如果您在损坏的部分（第 69 - 89 行）中发表评论 - 它会停止工作。

// WORKING

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: {
      lat: 37.773972,
      lng: -122.431297
    },
    gestureHandling: "greedy",
    disableDefaultUI: true
  });

  var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath:
      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
  });
}
var locations = [ …

我有一张带有基于聚类的标记的地图。我想要一种方法，当用户单击具有超过 100 个标记的集群时，不要放大并执行其他操作，例如打开弹出窗口；否则只是去簇。

在加载页面上，我正在调用服务并获取包含位置的客户列表。我正在将客户传递给集群功能。现在，当用户单击集群时，我想设置一些条件。如果为真，则打开一个弹出窗口，但不要放大两个除簇。我无法做到这一点。这是代码

客户.html

<div [hidden]="!MapView" style="height: 100%" #map id="map"></div>

客户.ts

    @ViewChild('map') mapElement: ElementRef;

    ngOnInit() {


            this.initMap();

        }

    initMap = () => {

            this._customerservice.GetCustomersWithLocations().subscribe(res => {

                if (res != null || res != undefined) {

                    this.CustomersLocation = res;

                    let latLng = new google.maps.LatLng(-31.563910, 147.154312);

                    let mapOptions = {
                        center: latLng,
                        zoom: 6,
                        mapTypeId: google.maps.MapTypeId.TERRAIN,
                        fullscreenControl: false
                    }

                    setTimeout(() => { // LOAD THE MAP FIRST
                        this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
                    }, 1000);

                    setTimeout(() => { //LOAD THE CLUSTER
                        this.mapCluster.addCluster(res, …