Карты Google удаляют метки или область затемнения, кроме некоторых регионов
Привет, я использую Google Map, и я хочу, чтобы ваши взгляды на следующий вопрос.
Можно ли скрыть или затемнить всю область, кроме какой-либо другой в googlemap?
если да, то, пожалуйста, помогите мне решить эту проблему.
Я пытался, но не нашел никакого решения до сих пор.
вот мой FIDDLE DEMO
в этой демонстрации я хочу выделить / скрыть метки всей области без маркеров.
Вот пример кода, который я использую, чтобы закрепить маркер на карте.
JS CODE:
<script>
var infowindow;
var map;
var myLatLng = [];
function initialize() {
var mapOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var bounds = new google.maps.LatLngBounds();
var obj = {
"JobRecord": [{
"ApplyUrl": "test",
"GeoLocations": {
"GeoLocationRecord": [{
"Latitude": "21.543333",
"Longitude": "39.172777"
}, {
"Latitude": "21.299135",
"Longitude": "40.428313"
}]
},
"JobId": "493743",
"JobTitle": "Sales Associate",
"Locations": {
"LocationRecord": [{
"Group": "Saudi Arabia",
"Title": "Taif"
}, {
"Group": "Saudi Arabia",
"Title": "Jeddah"
}]
}
}, {
"ApplyUrl": "test",
"GeoLocations": {
"GeoLocationRecord": {
"Latitude": "55.755826",
"Longitude": "37.617300"
}
},
"JobId": "492725",
"JobTitle": "Business Director - Starbucks - Russia",
"Locations": {
"LocationRecord": {
"Group": "Russia",
"Title": "Moscow"
}
}
}, {
"ApplyUrl": "test",
"GeoLocations": {
"GeoLocationRecord": {
"Latitude": "25.271139",
"Longitude": "55.307485"
}
},
"JobId": "492730",
"JobTitle": "Vice President - Victoria's Secret",
"Locations": {
"LocationRecord": {
"Group": "UAE",
"Title": "Dubai"
}
}
}]
};
var jobs = obj.JobRecord;
for (var i = 0; i < jobs.length; i++) {
if (jobs[i].GeoLocations.length != 0) {
var geoLocationRecord = jobs[i].GeoLocations.GeoLocationRecord;
var myjobs = new Array();
var single = new Object();
if (geoLocationRecord.length === undefined) {
single.JobId = jobs[i].JobId;
single.JobTitle = jobs[i].JobTitle;
single.Locations = jobs[i].Locations.LocationRecord;
var search = [geoLocationRecord.Latitude, geoLocationRecord.Longitude, single];
isLocationFree(search);
} else {
for (var j = 0; j < geoLocationRecord.length; j++) {
single[j] = new Object();
single[j].JobId = jobs[i].JobId;
single[j].JobTitle = jobs[i].JobTitle;
single[j].Locations = jobs[i].Locations.LocationRecord[j];
var search = [geoLocationRecord[j].Latitude, geoLocationRecord[j].Longitude, single[j]];
isLocationFree(search);
} //finish inner loop
}
} //finish if condition
} //finish loop
for (var x = 0; x < myLatLng.length; x++) {
var latlng = new google.maps.LatLng(parseFloat(myLatLng[x][0]),
parseFloat(myLatLng[x][1]));
bounds.extend(latlng);
createMarker(myLatLng[x], latlng);
}
map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function () {
if (map.getZoom() > 16) map.setZoom(3);
google.maps.event.removeListener(listener);
});
}
function createMarker(jobs, latlng) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, "click", function () {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({
content: createMessage(jobs)
});
infowindow.open(map, marker);
});
return marker;
}
function createMessage(jobs) {
console.log(jobs);
console.log("Total==>" + (Number(jobs.length) - 2));
if (jobs[2].Locations !== undefined) {
var locationTitle = jobs[2].Locations.Title;
} else {
var locationTitle = "";
}
var message = '';
message += '<div id="popupContent">' +
'<strong id="firstHeading" class="firstHeading">' + (Number(jobs.length) - 2) + " Vacancies in " + locationTitle + '</strong>' +
'<br><br>';
for (var y = 2; y < jobs.length; y++) {
message += '<a href="http://jobsearch.alshaya.com/cau/en/job/' + jobs[y].JobId + '" target="_blank">' + jobs[y].JobTitle + '</a><br>';
}
message += '</div>';
return message;
}
function isLocationFree(search) {
for (var i = 0; i < myLatLng.length; i++) {
if (myLatLng[i][0] === search[0] && myLatLng[i][1] === search[1]) {
myLatLng[i].push(search[2]);
return true;
}
}
myLatLng.push(search);
return myLatLng;
}
$(document).ready(function () {
initialize();
});
</script>
3 ответа
Вы можете сделать это довольно легко, используя FusionTable Layer.
Я рассматриваю здесь упомянутые "область" или "регионы" как страны - я полагаю, вы просто хотите выделить серые страны, которых нет в вашем XML-фиде?
Здесь я жестко закодировал страны из вашего примера - Россию, Саудовскую Аравию и Объединенные Арабские Эмираты. Вы должны сами создать логику, чтобы исключить страны, которых вы встречаете в своем фиде.
function greyoutWorld() {
var world_geometry = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk',
//select all but russia, saudi arabia and united arab emirates
where: "ISO_2DIGIT NOT IN ('RU', 'SA', 'AE')"
},
//add some grey color to cover the rest of the world
styles: [{
polygonOptions: {
fillColor: "#dadada",
strokeColor: "#ebebeb",
strokeWeight: "int"
},
polylineOptions: {
strokeColor: "#rrggbb",
strokeWeight: "int"
}
}],
map: map,
suppressInfoWindows: true
});
}
Результат выглядит так:
Разветвленная скрипка -> http://jsfiddle.net/QUPdZ/
Обновить
Что касается "маркеров красного круга", эта функция встроена в код слоя FusionTable и не может быть подавлена. См. Документацию в разделе "Лимиты":
Глядя на карту, вы можете заметить:
* Десять компонентов наибольшей площади мульти-геометрии показаны.
* При увеличении масштаба таблицы с более чем 500 объектами будут показывать точки (не линии или многоугольники).
Обходной путь должен добавить
minZoom: 2
к параметрам карты, как в этой скрипке -> http://jsfiddle.net/LVRp2/
Fusion Table - World Country Boundaries.kml - является общедоступной и доступной здесь:
https://www.google.com/fusiontables/DataSource?docid=1N2LBk4JHwWpOY4d9fobIn27lfnZ5MDy-NoqqRpk.
Я полагаю, что альтернативный источник - World Country Boundaries.csv - можно найти здесь:
https://www.google.com/fusiontables/DataSource?docid=1uL8KJV0bMb7A8-SkrIe0ko2DMtSypHX52DatEE4.
Оба работают с вышеупомянутой скрипкой.
Давайте сделаем резюме здесь.
Хотя у вас есть несколько решений, описанных здесь, все они требуют внешних данных, которые кстати. трудно поддерживать и неполный (я все еще не мог найти полный набор данных границ мира Fusion Table).
Я лично не думаю, что это хороший способ "выделить" позиции, и я думаю, что это слишком сложно.
Другой возможностью было бы использовать кластерный маркер, который очень хорош для выделения большинства ваших позиций. И это легко реализовать.
То, что мы не знаем, это то, что вам нужно от API Карт Google. Возможно, вам следует рассмотреть возможность использования другого сервиса, который мог бы упростить манипулирование данными границ. Например, вы уже проверяли jVectorMap?
Я знаю, что мой ответ на самом деле не является решением вашего вопроса, но он может помочь вам задать себе правильный вопрос: является ли выделение некоторых областей на карте лучшим вариантом, чтобы выделить места, где они находятся?
Я достиг этого в v2 googlemaps, наложив наложение фигур (то есть многоугольник, охватывающий весь мир, НО область, которую я хочу показать).
В конце концов, моя область была довольно сложной, поэтому я сгенерировал ее с помощью карт Google и сохранил форму в отдельном файле.kmz, вы сможете достичь результата в обоих направлениях.
Вот скрипка добавления периметра по одной координатной паре за раз.
KmlLayer функция позволяет загружать.kmz, который вы сгенерировали из карты Google; см. также этот ответ на Stackru: Использование файлов KMZ в Google Maps
В Google Maps следуйте этому руководству, чтобы создать кмл