Главная » PHP » Информационное окно для нескольких кругов на карте Google

Информационное окно для нескольких кругов на карте Google

Мне нужно добавить информационные окна для нескольких кругов. Я попытался изменить cityCircle на citymap [город] в addListener. Я гуглю это уже шесть часов … Приведенный ниже код откроет окно в левом верхнем углу карты, где ничего нет, не по кругу. Заранее благодарю за любую помощь!

echo '<script>
var citymap = {'."\n";
$result = $site->query("SELECT * FROM ZIPCODES WHERE 1");
while ($data = $result->fetch_array())
{
$zip = $data['ZIP'];
$coor = explode(",", $data['COOR']);
$count = $data['COUNT'];
echo $zip . ': {
center: {lat: ' . $coor[0] . ', lng: ' . $coor[1] . '},
population: ' . $count . ',
title: "<div>TEST</div>"},'."\n";

}
echo '};

function initMap() {
var map = new google.maps.Map(document.getElementById("advisor-map"), {
zoom: 6,
center: {lat: 34.730318, lng: -87.823112},
mapTypeId: "terrain"});

for (var city in citymap) {
var cityCircle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
title: citymap[city].title,
radius: Math.sqrt(citymap[city].population) * 10000
});

google.maps.event.addListener(cityCircle, "click", function (e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(cityCircle.title);
infoWindow.open(map, cityCircle);
});
}
}
google.maps.event.addDomListener(window, "load", initialize);
</script>'."\n";

0

Решение

  1. Создать информационное окно: var infowindow = new google.maps.InfoWindow();
  2. установить его содержание, положение и открыть его одним кликом:
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(cityCircle, "click", function(e) {
infoWindow.setContent(this.title);
infoWindow.setPosition(this.getCenter());
infoWindow.open(map);
});

доказательство концепции скрипки

снимок экрана с полученной картой в открытом окне

фрагмент кода:

function initMap() {
var map = new google.maps.Map(document.getElementById("advisor-map"), {
zoom: 6,
center: {
lat: 55,
lng: 0
},
mapTypeId: "terrain"});

for (var city in citymap) {
var cityCircle = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
title: city, // citymap[city].title,
radius: Math.sqrt(citymap[city].population) * 100
});

var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(cityCircle, "click", function(e) {

infoWindow.setContent(this.title);
infoWindow.setPosition(this.getCenter());
infoWindow.open(map);
});
}
}
google.maps.event.addDomListener(window, "load", initMap);
var citymap = {};
citymap['Mumbai'] = {
center: new google.maps.LatLng(19.075787, 72.8774882),
population: 14000
};
citymap['Cardiff'] = {
center: new google.maps.LatLng(51.4887969, -3.1826222),
population: 1000
};
citymap['Pune'] = {
center: new google.maps.LatLng(18.5212252, 73.8556156),
population: 14000
};
citymap['Beeston'] = {
center: new google.maps.LatLng(52.9547839, -1.1581733),
population: 3000
};
citymap['Birmingham'] = {
center: new google.maps.LatLng(52.4677785, -1.7230922),
population: 4000
};
citymap['Bristol'] = {
center: new google.maps.LatLng(51.5434779, -2.573748),
population: 2000
};
citymap['Brussels'] = {
center: new google.maps.LatLng(50.8891268, 4.4592719),
population: 1000
};
citymap['Crewe'] = {
center: new google.maps.LatLng(53.0888925, -2.4357559),
population: 2000
};
citymap['Dundee'] = {
center: new google.maps.LatLng(56.4563534, -2.9752489),
population: 1000
};
citymap['Durham'] = {
center: new google.maps.LatLng(54.5468172, -1.5703596),
population: 1000
};
citymap['Glasgow'] = {
center: new google.maps.LatLng(55.8601948, -4.256542),
population: 2000
};
citymap['Liverpool'] = {
center: new google.maps.LatLng(53.4114691, -2.9954281),
population: 5000
};
citymap['Livingston'] = {
center: new google.maps.LatLng(55.8889266, -3.5575676),
population: 12000
};
citymap['Moray'] = {
center: new google.maps.LatLng(57.6153854, -3.5727702),
population: 1000
};
citymap['Newcastle'] = {
center: new google.maps.LatLng(55.0114826, -1.6218245),
population: 1000
};
citymap['Runcorn'] = {
center: new google.maps.LatLng(53.3416269, -2.7312661),
population: 6000
};
citymap['Winnersh'] = {
center: new google.maps.LatLng(51.43674, -0.89131),
population: 5000
};
citymap['Wolverhampton'] = {
center: new google.maps.LatLng(52.6375302, -2.1184067),
population: 1000
};
citymap['Plymouth'] = {
center: new google.maps.LatLng(50.3752499, -4.1425974),
population: 1000
};
citymap['Swinton Manch'] = {
center: new google.maps.LatLng(53.5108841, -2.3468262),
population: 1000
};
citymap['Cleveleys'] = {
center: new google.maps.LatLng(53.8758639, -3.0423774),
population: 1000
};
citymap['Peterborough'] = {
center: new google.maps.LatLng(52.5694182, -0.2415024),
population: 1000
};
citymap['Saffron Walden'] = {
center: new google.maps.LatLng(52.0224437, 0.2393275),
population: 1000
};
citymap['Gloucester'] = {
center: new google.maps.LatLng(51.864033, -2.2382369),
population: 1000
};
citymap['LTQ'] = {
center: new google.maps.LatLng(51.5250213, -0.141524),
population: 18000
};
citymap['Enfield'] = {
center: new google.maps.LatLng(51.651765, -0.0835785),
population: 1000
};
html,
body,
#advisor-map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="advisor-map"></div>
0

Другие решения

Это то, что я искал. Карта также автоцентров и зумов. Надеюсь, это поможет кому-то!

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var citymap = {};
citymap["38119"] = {
center: new google.maps.LatLng(35.0772572, -89.84582),
zipcode: "38119",
population: "29",
advisors: "advisors"};
citymap["37909"] = {
center: new google.maps.LatLng(35.9467011, -84.0326033),
zipcode: "37909",
population: "9",
advisors: "advisors"};
citymap["38655"] = {
center: new google.maps.LatLng(34.2853188, -89.436391),
zipcode: "38655",
population: "2",
advisors: "advisors"};
citymap["37027"] = {
center: new google.maps.LatLng(35.9805462, -86.761749),
zipcode: "37027",
population: "16",
advisors: "advisors"};
citymap["42104"] = {
center: new google.maps.LatLng(36.88064, -86.4794359),
zipcode: "42104",
population: "2",
advisors: "advisors"};
citymap["38804"] = {
center: new google.maps.LatLng(34.2684438, -88.6819958),
zipcode: "38804",
population: "8",
advisors: "advisors"};
citymap["37204"] = {
center: new google.maps.LatLng(36.1003494, -86.7718017),
zipcode: "37204",
population: "2",
advisors: "advisors"};
citymap["37421"] = {
center: new google.maps.LatLng(35.041539, -85.1583064),
zipcode: "37421",
population: "9",
advisors: "advisors"};
citymap["39157"] = {
center: new google.maps.LatLng(32.4352998, -90.1588618),
zipcode: "39157",
population: "4",
advisors: "advisors"};
citymap["37075"] = {
center: new google.maps.LatLng(36.3233083, -86.6006249),
zipcode: "37075",
population: "1",
advisors: "advisor"};
citymap["38305"] = {
center: new google.maps.LatLng(35.6684779, -88.7301525),
zipcode: "38305",
population: "1",
advisors: "advisor"};
citymap["37738"] = {
center: new google.maps.LatLng(35.6944147, -83.4643551),
zipcode: "37738",
population: "1",
advisors: "advisor"};
citymap["39501"] = {
center: new google.maps.LatLng(30.3981324, -89.1038783),
zipcode: "39501",
population: "1",
advisors: "advisor"};
citymap["72205"] = {
center: new google.maps.LatLng(34.7486563, -92.3542193),
zipcode: "72205",
population: "1",
advisors: "advisor"};
citymap["39402"] = {
center: new google.maps.LatLng(31.3299729, -89.4174641),
zipcode: "39402",
population: "1",
advisors: "advisor"};
citymap["38835"] = {
center: new google.maps.LatLng(34.93, -88.52),
zipcode: "38835",
population: "1",
advisors: "advisor"};
citymap["37919"] = {
center: new google.maps.LatLng(35.9073934, -84.0061661),
zipcode: "37919",
population: "1",
advisors: "advisor"};
citymap["38120"] = {
center: new google.maps.LatLng(35.1212908, -89.8551818),
zipcode: "38120",
population: "1",
advisors: "advisor"};
citymap["38834"] = {
center: new google.maps.LatLng(34.8984684, -88.5951751),
zipcode: "38834",
population: "1",
advisors: "advisor"};

var cityCircle;
var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();

function initialize() {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 10000,
title: citymap[city].population,
advisor: citymap[city].advisors,
zipcode: citymap[city].zipcode
};

bounds.extend(populationOptions.center);

cityCircle = new google.maps.Circle(populationOptions);
cityCircle.title = populationOptions.title;
cityCircle.advisor = populationOptions.advisor;
cityCircle.zipcode = populationOptions.zipcode;

map.fitBounds(bounds);

google.maps.event.addListener(cityCircle, 'click', function(e) {
infowindow.setContent("<h3 class='mt20 mb0'>" + this.title + " " + this.advisor + " available</h3><a class='mb30' href='/advisors/find/showme/" + this.zipcode + "/'>Show Me!</a>");
infowindow.setPosition(this.getCenter());
infowindow.open(map);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
0

Источник
По вопросам рекламы [email protected]
Web-Answers © 2024 Наверх