Я использую 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](https://i.stack.imgur.com/c3e3W.png)
![enter image description here](https://i.stack.imgur.com/1nrFM.png)
Приведенные выше 2 изображения - это моя текущая карта маркеров
Все, что мне нужно, это маркер "плюс" ниже, при котором пользовательский щелчок покажет несколько маркеров
![enter image description here](https://i.stack.imgur.com/fVZ6A.png)