我正在使用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的结尾
上面2张图片是我当前的标记图
我所需要的是下面的加号,用户点击将显示多个标记