Здравствуйте!
Делаю карту с заказами. В каждом городе может быть несколько заказов. Я рисую в каждом городе, в котором есть заказы точку и по её нажатии во всплывающий див нужно выводить информацию о всех имеющихся заказах в городе. Столкнулся с проблемой: навешиваю обработчики событий в цикле.
var infoWindow = new google.maps.InfoWindow({
content: '<div>' + text + '</div>'
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
Но когда нажимаю на любую точку, мне почему-то высвечивается див с последним в цикле городом и возле этого города. Нажимаю на Париж - карта высвечивает мне Нью-Йоркские заказы и переходит к Нью-Йорку. Нажимаю на Лондон - то же самое.
Т.е. как я понял этот обработчик существует только один. И т.к. последний в цикле был город Нью-Йорк - выводятся только Нью-Йоркские заказы даже по нажатию на любой другой город. Как сделать так, чтобы при нажатии на Лондон выводился лондонский заказ?(и т.д.)
На всякий случай коды файлов:
map.js
var map;
function initMap() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
map = new google.maps.Map(document.getElementById('map'), {
center: myLatlng,
zoom: 8
});
var markers = {};
for (var i in orders) {
var city = orders[i][orders[i].length - 1];
if(!markers[city]){
markers[city] = [];
}
markers[city].push(orders[i]);
}
for (city in markers) {
myLatlng = findLatlng(city);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
var text = '';
for (var currentOrder in markers[city]) {
if(currentOrder > 0){
text += '<hr>';
}
/*for (var j in orders) {
if(orders[j] !== markers[city][currentOrder]){
continue;
}
var orderId = j;
break;
}
text += 'Заказ №' +(orderId+1) + '<br>';*/
for (var item in markers[city][currentOrder]) {
if(typeof markers[city][currentOrder][item] !== 'object'){
continue;
}
if(markers[city][currentOrder][item]['id'] !== 1){
text += '<br>';
}
text += markers[city][currentOrder][item]['id'] + ". " + markers[city][currentOrder][item]['name'] + ", " + markers[city][currentOrder][item]['count'] + " штук, " + markers[city][currentOrder][item]['price'] + markers[city][currentOrder][item]['moneySign'];
}
}
var infoWindow = new google.maps.InfoWindow({
content: '<div>' + text + '</div>'
});
google.maps.event.addListener(marker, 'click', function() {
j.open(map, marker);
});
}
}
function showMap() {
$('#map').show();
initMap();
}
function showOrderOnMap() {
var orderId = $('.button.selected').data('id');
city = orders[orderId][1];
var myLatlng = findLatlng(city);
console.log(myLatlng);
map.center = myLatlng;
}
function findLatlng(city) {
var myLatlng;
$.ajax({
url: 'http://maps.googleapis.com/maps/api/geocode/json?address='+ city +'&sensor=false&language=en',
async: false,
success: function(data) {
myLatlng = new google.maps.LatLng(data['results'][0]['geometry']['location']['lat'], data['results'][0]['geometry']['location']['lng']);
}
});
return myLatlng;
}
index.html
<!doctype html>
<html>
<head>
<title>Task Order</title>
<link rel="stylesheet" type="text/css" href="style/main.css">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/script.js" charset="utf-8"></script>
</head>
<body>
<nav>
<p>Menu</p>
<ul>
<li><a href="#">Заказы</a></li>
<li><a href="#" onclick="showMap()">Карта</a></li>
</ul>
</nav>
<section>
<div id="ordertabs"></div>
<input type="text" id="search">
<table id="orderstable">
<thead></thead>
<tbody></tbody>
</table>
<a href="#" onclick="showOrderOnMap()">Показать на карте</a>
<div id="map"></div>
</section>
<script src ="js/map.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHCac5x5Eq9LRUFqSYcHBFlygfI9mJxYA"
async defer></script>
</body>
</html>
Ну и об организации данных в основном файле script.js
var orders = [
[
{
id: 1,
name: "Book",
count: 3,
price: "157",
moneySign: '$'
},
{
id: 2,
name: "Pen",
count: 4,
price: "85",
moneySign: '$'
},
{
id: 3,
name: "Phone",
count: 1,
price: "464",
moneySign: '$'
},
{
id: 4,
name: "Pencil Red",
count: 65,
price: "314",
moneySign: '$'
},
{
id: 5,
name: "Sharpener",
count: 6,
price: "96",
moneySign: '$'
},
"London"
],
[
{
id: 1,
name: "Tape",
count: 5,
price: "543",
moneySign: '$'
},
{
id: 2,
name: "Textbook",
count: 65,
price: "314",
moneySign: '$'
},
{
id: 3,
name: "Pencil case",
count: 35,
price: "346",
moneySign: '$'
},
{
id: 4,
name: "Desk",
count: 5,
price: "4314",
moneySign: '$'
},
{
id: 5,
name: "Marker",
count: 5,
price: "145",
moneySign: '$'
},
"Paris"
],
[
{
id: 1,
name: "Paper",
count: 5,
price: "87",
moneySign: '$'
},
{
id: 2,
name: "Chalk",
count: 6,
price: "435",
moneySign: '$'
},
{
id: 3,
name: "Clock",
count: 8,
price: "563",
moneySign: '$'
},
{
id: 4,
name: "Ruler",
count: 22,
price: "457",
moneySign: '$'
},
{
id: 5,
name: "Globe",
count: 7,
price: "789",
moneySign: '$'
},
"New-York"
],
[
{
id: 1,
name: "Chair",
count: 2,
price: "54",
moneySign: '$'
},
{
id: 2,
name: "Eraser",
count: 56,
price: "2445",
moneySign: '$'
},
{
id: 3,
name: "Map",
count: 11,
price: "345",
moneySign: '$'
},
{
id: 4,
name: "Scissors",
count: 24,
price: "451",
moneySign: '$'
},
{
id: 5,
name: "Notebook",
count: 32,
price: "654",
moneySign: '$'
},
"Paris"
]
];
