Перекрывающиеся маркеры spiderfier не могут маркер Status.SPIDERFIABLE изображение маркера - PullRequest
0 голосов
/ 06 июня 2019

Я использую overlappingmarkerspiderfier для кластеризации всех моих маркеров на карте, все работает нормально, кроме того, что я не могу получить (markerStatus.SPIDERFIABLE), чтобы прочитать мой имиджмейкер.однако мои результаты определения местоположения основаны на базе данных mysql (find.php) и будут отражены на другой странице javascript (findmyplace.js), поэтому (findmyplace.js) создает только один тип изображения маркера.Мне просто нужен маркер плюс, чтобы проверить, есть ли на карте тот же маркер координат.Я надеюсь, что вы, ребята, можете понять, что я пытаюсь объяснить, и действительно ценю, если я получу какую-либо помощь от вас, ребята, потому что я застрял в этой ситуации на неделю.спасибо.

<form action="<?php echo str_replace( basename($_SERVER['PHP_SELF']), "resource/find.php", $_SERVER['PHP_SELF'] ) ?>" method="post" id="search">

<input class="txtinput1" id="minPrice" name="minPrice" placeholder="Min Price" type="text"> 
<input class="txtinput2" id="maxPrice" name="maxPrice" placeholder="Max Price" type="text">
<input class="txtproduct" id="product" name="product" placeholder="Search Text......" type="text"> 
<input class="submitbtn" onclick="start()" type="submit" value="Search" >

</form>

это где огонь выключен, чтобы найти .php

var mapLibsReady = 0;
function mapLibReadyHandler() {
  if (++ mapLibsReady < 2) return;

  var mapElement = document.getElementById('map-canvas');
  var map = new google.maps.Map(mapElement, { center: { lat: 52, lng: -1 }, zoom: 7 });

  var iw = new google.maps.InfoWindow();
  function iwClose() { iw.close(); }
  google.maps.event.addListener(map, 'click', iwClose);

  var oms = new OverlappingMarkerSpiderfier(map, { markersWontMove: true, markersWontHide: true });

  oms.addListener('format', function(marker, status) {
    var iconURL = 
      status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE ? 'intpostfolio/marker-plus.svg':null;
    var iconSize = new google.maps.Size(23, 32);
    marker.setIcon({
      url: iconURL,
      size: iconSize,
      scaledSize: iconSize  // makes SVG icons work in IE
    });
  });

  for (var i = 0, len = window.mapData.length; i < len; i ++) {
    (function() {  // make a closure over the marker and marker data
      var markerData = window.mapData[i];  // e.g. { lat: 50.123, lng: 0.123, text: 'XYZ' }
      var marker = new google.maps.Marker({
        position: markerData,
        optimized: ! isIE  // makes SVG icons work in IE
      });
      google.maps.event.addListener(marker, 'click', iwClose);
      oms.addMarker(marker, function(e) {
        iw.setContent(markerData.text);
        iw.open(map, marker);
      });
    })();
  }

  window.map = map;  // for debugging/exploratory use in console
  window.oms = oms;  // ditto
}

// randomize some overlapping map data -- more normally we'd load some JSON data instead

var baseJitter = 2.5;
var clusterJitterMax = 0.1;
var rnd = Math.random;
var data = [];
var clusterSizes = [1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 3, 3, 4, 5, 6, 7, 8, 9, 12, 18, 24];
for (var i = 0; i < clusterSizes.length; i++) {
  var baseLon = -1 - baseJitter / 2 + rnd() * baseJitter;
  var baseLat = 52 - baseJitter / 2 + rnd() * baseJitter;
  var clusterJitter = clusterJitterMax * rnd();
  for (var j = 0; j < clusterSizes[i]; j ++) data.push({
    lng:  baseLon - clusterJitter + rnd() * clusterJitter,
    lat:  baseLat - clusterJitter + rnd() * clusterJitter,
    text: Math.round(rnd() * 100) + '% happy'
  });
}
window.mapData = data;

<script src="https://maps.googleapis.com/maps/api/js?key="type="text/javascript"></script> 
<script async defer src="js/oms.min.js?spiderfier_callback=mapLibReadyHandler"></script>
<script src="js/jquery.min.js"></script> 
<script src="js/infobox.min.js" type="text/javascript"></script> 
<script src="js/findMyPlace.1.0.min.js" type="text/javascript"></script> 
<script src="js/lightbox-2.6.min.js" type="text/javascript"></script> 
<script src="js/search.js" type="text/javascript"></script> <!-- Add code highlight -->

конец страницы индекса

Я использую oms.js

r.markerStatus = {
        SPIDERFIED: "SPIDERFIED",
        SPIDERFIABLE: "SPIDERFIABLE",
        UNSPIDERFIABLE: "UNSPIDERFIABLE",
        UNSPIDERFIED: "UNSPIDERFIED"
};

начало find.php

$results[] = array
(

    "ID" => $data["id"], //[optional] Used to identify each marker if report marker is enabled
    "userIcon" => "upload/".$data['picname'], //[optional] Set user icon
    "userName" => "<a href=approve.php?id=".$data["id"].">".$data["companyname"]."</a>",
    "productName" => $data["productname"], //[optional] set username 
    "Description" => $data["description"],
    "City" => $data["city"],
    "Country" => $data["country"],
    "Allcity" => $data["allcity"],
    "Price" => $data["price"],
    "Type" => $data["type"],
    "Cat" => $data["cat"],
    "Address" => $data["address"],
    "Regdate" => $data["regdate"],
    "markerIcon" => "upload/".$data["icon"], //[optional] set marker icon
    "markerPic" => "upload/".$data["picname"], //[optional] set marker icon
    //"visitedIcon" => 'images/red.png', //[optional] set visited marker icon
    "latitude" =>  $data["latitude"], //[required] set marker latitude
    "longitude" => $data["longitude"], //[required] set marker longitude            
    /* Now we start to create block of informations that we want to display */
)   

markerIcon - маркер изображения

конец find.php

начало findmyplace.js

for (var i = 0; i < g.length; i++) {
    (function(d, e) {
      setTimeout(function() {
        if (d.latitude != "" && d.longitude != "") {
          var a = new google.maps.LatLng(d.latitude, d.longitude);
          var b = {};
          $.extend(b, y.markerOptions);
          b.position = a;
          b.map = r;
          b.titles = d.productName;
          b.address = d.Address;
          b.price = d.Price;
          b.pic = d.markerPic || y.markerOptions.pic;
          b.icon = d.markerIcon || y.markerOptions.icon;

          b.draggable = false;

}

b.icon = d.markerIcon ||y.markerOptions.icon;вот где findmyplace.js прочитает изображение маркера из find.php и покажет на карте Google

конец findmyplace.js

enter image description here

enter image description here

Приведенные выше 2 изображения - это моя текущая карта маркеров

Все, что мне нужно, это маркер "плюс" ниже, при котором пользовательский щелчок покажет несколько маркеров

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...