重叠的markerspiderfier无法标记markerStatus.SPIDERFIABLE标记图像

时间:2019-06-06 15:40:56

标签: javascript php google-maps-api-3

我正在使用overlayingmarkerspiderfier将我的所有标记聚集在地图上,除了我无法读取(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>

这是找到find.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

0 个答案:

没有答案