2015-12-29 5 views
0

Привет, мне нужна помощь в сохранении моего кода СУХОЙ, я использую API-интерфейс google map, и я использую функцию, которую они дают, что делает информационные окна, я работаю на школьном проекте, поэтому у меня нет API для полей для гольфа, это стоит денег, и это просто для школьного проекта, а не для бизнеса, поэтому я хочу, чтобы он зацикливал это, чтобы сделать различные страны нации в США по полям для гольфа ,Мне нужна помощь. Ликвидация поддельных мест на Картах Google. Api

Я сделал огромный файл Json с фальшивой информацией для некоторых полей для гольфа, и я хочу знать, есть ли у вас, ребята, идея о том, как зацикливать этот пример и реализовать мои json-адреса в API карт google, поэтому, когда я открою свой на странице будут показаны точки падения на карте с информацией и веб-сайтом, чтобы посетить сайт для гольфа.

это то, что я использую для страницы, высота и логичность были изменены, чтобы показать загородный клуб в Palm Desert CA, не беспокойтесь о текстовой информации, это просто пример, просто нужно посмотреть, сможет ли кто-нибудь помочь я зациклил это на информацию, которую я составил из 10 загородных клубов, я получил еще один файл Json, который я написал.

спасибо за чтение и надеюсь, распространяемого может помочь благодаря

function initMap() { 
 
    var uluru = { 
 
    lat: 33.745990, 
 
    lng: -116.315722 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: uluru 
 
    }); 
 

 
    var contentString = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
 
    'sandstone rock formation in the southern part of the ' + 
 
    'Northern Territory, .</p>' + 
 
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + 
 
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' + 
 
    '(last visited June 22, 2009).</p>' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: contentString 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: uluru, 
 
    map: map, 
 
    title: 'Uluru (Ayers Rock)' 
 
    }); 
 
    marker.addListener('click', function() { 
 
    infowindow.open(map, marker); 
 
    }); 
 
}
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Info windows</title> 
 
</head> 
 

 
<body> 
 
    <div id="map"></div> 
 
    <script> 
 
    </script> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script> 
 
</body> 
 

 
</html>

ответ

1

Если у вас нет доступа к веб-серверу, который может служить файл JSon, самый простой способ заключается в адаптировать JSON, чтобы быть внутри яваскрипта переменной:.

var locations = [{ 
    "name": "Uluru", 
    "description": "Also known as Ayers rock", 
    "lat": "33.745990", 
    "lon": "-116.315722" 
}, { 
    "name": "Mt. Everest", 
    "description": "Located in the himalayas", 
    "lat": "33.745990", 
    "lon": "-116.315722" 
}]; 

Put столько, сколько вы хотите, поместить их в файл сценария (например, место s.js) и включить их, как и любой другой файл javascript в начало вашего HTML.

Затем вы можете использовать эту переменную в своем основном файле сценария, пропустить через массив JSON и добавить маркеры для каждого.

for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i].lat, locations[i].lon), 
     map: map, 
     }); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i].description); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
} 

EDIT: Вот пример использования кода из сниппета:

function initMap() { 
 
var locations = [{ 
 
    "name": "Uluru", 
 
    "description": "Also known as Ayers rock", 
 
    "lat": "33.745990", 
 
    "lon": "-116.215622" 
 
}, { 
 
    "name": "Mt. Everest", 
 
    "description": "Located in the himalayas", 
 
    "lat": "33.746990", 
 
    "lon": "-116.315722" 
 
}]; 
 
    var uluru = { 
 
    lat: 33.745990, 
 
    lng: -116.315722 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: uluru 
 
    }); 
 

 
    var contentString = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 
 
    'sandstone rock formation in the southern part of the ' + 
 
    'Northern Territory, .</p>' + 
 
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' + 
 
    'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' + 
 
    '(last visited June 22, 2009).</p>' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: contentString 
 
    }); 
 

 
    for (i = 0; i < locations.length; i++) { 
 

 
    marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(locations[i].lat, locations[i].lon), 
 
    map: map, 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
    return function() { 
 
     infowindow.setContent(locations[i].description); 
 
     infowindow.open(map, marker); 
 
    } 
 
    })(marker, i)); 
 
} 
 
}
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #000; 
 
    border: 2px solid #000; 
 
} 
 
#map { 
 
    height: 100%; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Info windows</title> 
 
</head> 
 

 
<body> 
 
    <div id="map"></div> 
 
    <script> 
 
    </script> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script> 
 
</body> 
 

 
</html>

+0

вау чувак, это большой совет больной обязательно попробовать его и плохо опубликовать свои результаты в ближайшее время благодаря , –

+0

эй, я добавлю свой API-интерфейс google, в моем main.js, я попытался поместить на него цикл, но теперь карта не будет отображаться, хм-м, я задаюсь вопросом, что я делаю неправильно, о, хорошо, чтобы продолжать пытаться спасибо –

+0

Отредактировано мой код, чтобы добавить фрагмент из вашего исходного ответа – Nirri

Смежные вопросы