Добавление маркера карты Google на экран на основе HTML-выбора - PullRequest
0 голосов
/ 14 марта 2012

Я планирую разместить маркеры на карте Google на основе выбранного раскрывающегося списка.У меня есть мой документ, относящийся к XML-документу, который содержит результаты из базы данных, и я хочу получить результаты из этого XML-документа на основе моего выпадающего списка.Я хочу разместить эти маркеры на карте.Есть какие-нибудь идеи о том, как это сделать?Я хотел бы использовать php, если это возможно.

1 Ответ

1 голос
/ 14 марта 2012

Вы сможете использовать PHP только для части этого, чтобы рисовать маркеры на карте с помощью карт Google, которые вам нужны для использования JavaScript. Вот очень простой пример того, как загрузить карты Google и отобразить на нем маркер. Очевидно, вам нужно будет перебрать ваш источник данных и использовать его для заполнения значений параметров в списке выбора. Если вы имеете дело с большим количеством потенциальных элементов, возможно, имеет смысл получить значения параметров в отдельном http-запросе (например, с помощью ajax).

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Simple Map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=3&amp;sensor=false" type="text/javascript"></script>
    <script type="text/javascript">
        var map;

        var male = [[39.167107,-86.534363],[39.130554,-85.128891]]; 
        var female = [[39.167107,-84.534363],[38.130554,-83.128891]];

        function initialize() {
          if (GBrowserIsCompatible()) {
            map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(39.167107,-86.534363), 7);
            map.setUIToDefault(); 

          }
        }  

        function addMarker(){ 
            var select = document.getElementById("choose_option");
            var currentValue = select.options[select.selectedIndex].value;     

            if (currentValue == "Male")
            {  
                for (i=0;i<male.length;i++){
                    var markerPoint = new GLatLng(male[i][0], male[i][1]);
                    var marker = new GMarker(markerPoint, {draggable: true, bouncy: true});
                    map.addOverlay(marker);
                }
            }
            else if (currentValue == "Female")
            {    
                for (i=0;i<female.length;i++){
                    var markerPoint = new GLatLng(female[i][0], female[i][1]);
                    var marker = new GMarker(markerPoint, {draggable: true, bouncy: true});
                    map.addOverlay(marker);
                }
            } 

        }
    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div> 
    <select id="choose_option" onchange="addMarker()"> 
        <option id="1" value="">Choose</option>  
        <option id="2" value="Male">Male</option>
        <option id="3" value="Female">Female</option>
    </select>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...