0

Web ページで作成した地図にマーカーを追加する方法を探しています...これがページのコードです...

<link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>

<style>
    #map {
        width: 100%;
        height: 600px;
    }
</style>

<div id='map' />

<script type='text/javascript'>
    var map = L.mapbox.map('map', '[mapname]')

</script>

これにより、mapbox からマップがレンダリングされますが、マーカーを提供する Web サービスを作成する方法がわかりません。このデータは、SQL データベースのテーブルに格納されます。

データを含むGeoJSONファイルをロードできることは理解していますが、このファイルの作成方法と、通常のJSONとの違いがわかりません。助けていただければ幸いです。

ありがとう

4

2 に答える 2

0

私は似たようなことをしています、これは私がやっていることです。

PHP を使用して MySQL データベースから座標を取得し、次のようなものを返します。

var geoJson = [
    {
        type: 'Feature',
        "geometry": { "type": "Point", "coordinates": [-77.03, 38.90]},
        "properties": {}
    },
    {
       type: 'Feature',
       "geometry": { "type": "Point", "coordinates": [-64.567, 32.483]},
       "properties": {}
    }      
];

PHP ファイルは次のようになります。

<?php  
            // Connect
            $link = mysqli_connect("[host]","[username]","[password]","[database-name]") or die("Error " . mysqli_error($link));

            // Get the coordinates of the places
            $query = "SELECT * FROM `places`";
            $places = $link->query($query);

                var geoJson  = [<?php

                // Loop through places and plot them on map 

                // This is just building the JSON string

                $i = 1;
                while($venue = $venues->fetch_assoc()): 

                    if($i > 1){ echo ","; } ?>
                    {
                        type: 'Feature',
                        "geometry": { "type": "Point", "coordinates": [<?php echo $venue['lon']; ?>, <?php echo $venue['lat']; ?>]},
                        "properties": {}
                    }

                    <?php $i++; ?>

                <?php endwhile; ?>

            ];




            map.markerLayer.setGeoJSON(geoJson);

注 - この PHP は、マップを作成している Javascript の内部にあります。

私が言ったように、私にとっても初期の頃です。上記のコードは機能しますが、私がこれまでに得た限りです。次に取り上げるのは、JavaScript テンプレートと、それらを使用してデータを取り込む方法です。より良い方法になると感じていますが、よくわかりません。とにかく、それはあなたにとって役に立つかもしれません。

于 2013-10-25T12:07:39.447 に答える
0

GeoJSON はわかりませんが、これは Google Maps v3 API を使用して処理する方法です。

1 つのマーカーの場合:

        lng = (4.502384184313996, 4.461185453845246);
        lat = (51.011527400014664, 51.02974935275779);
        cur_loc = new google.maps.LatLng(lat, lng);

        var marker = new google.maps.Marker({
            position: cur_loc, //To be defined with LatLng variable type
            draggable: false, 
            animation: google.maps.Animation.DROP,
            icon: image
        });

        // To add the marker to the map, call setMap();
        marker.setMap(map);

MySQL (Ajax) から取得した複数のマーカーの場合:

        google.maps.event.addListener(map, 'idle', function () {
            var bounds = map.getBounds();
            var ne_lat = bounds.getNorthEast().lat();
            var ne_lng = bounds.getNorthEast().lng();
            var sw_lat = bounds.getSouthWest().lat();
            var sw_lng = bounds.getSouthWest().lng();
            // Call you server with ajax passing it the bounds
            $.ajax({
                  type: "GET",
                  url: "http://www.zwoop.be/develop/home/bars/bars_get_markers.php",
                  data: {
                      'ne_lat': ne_lat,
                      'ne_lng': ne_lng,
                      'sw_lat': sw_lat, 
                      'sw_lng': sw_lng
                  },
                  datatype: "json",
                  success: function(data){
                    if(data){
                        // In the ajax callback delete the current markers and add new markers
                        function clearOverlays() {
                            for (var i = 0; i < array_markers.length; i++ ){
                                array_markers[i].setMap(null);
                            }
                            array_markers = [];
                        };
                        clearOverlays();

                        //parse the returned json obect
                        //Create a marker for each of the returned objects                        
                        var obj  = $.parseJSON(data);
                        $.each(obj, function(index,el) {
                            var bar_position = new google.maps.LatLng(el.lat, el.lng);
                            image_bar = "http://www.sherv.net/cm/emoticons/drink/whiskey-smiley-emoticon.gif";

                            var marker = new google.maps.Marker({
                                position: bar_position,
                                map: map, 
                                icon: image_bar
                                });
                            //Add info window. With HTML, the text format can be edited. 
                            google.maps.event.addListener(marker, 'click', function() {
                                if (infowindow){
                                    infowindow.close();
                                };
                                content = "<div id='infowindow_container'><h3><a class='profile_name_bar' href='#' id='" + el.profile_id + "'>"+el.profile_name+"</a></h3></div>";
                                infowindow = new google.maps.InfoWindow({ 
                                    content: content
                                });
                                infowindow.open(map,marker);
                            });                            
                            array_markers.push(marker);
                        });

                        //Place the markers on the map
                        function setAllMap(map) {
                          for (var i = 0; i < array_markers.length; i++) {
                            array_markers[i].setMap(map);
                          }
                        }
                        setAllMap(map);

                        //marker clusterer
                        var zoom = 17;
                        var size = size ==-1?null:size;
                        var style = style ==-1?null:style;
                        var markerCluster = new MarkerClusterer(map, array_markers,{maxZoom:zoom,gridSize:size});
                    }
                },
                  error: function (xhr, ajaxOptions, error) {
                        alert(error);
                        }
                    })             
          });

このコードは、マップのビューポートを見て、マーカーを動的に読み込みます。ズーム/パンすると、コードはデータベースにクエリを実行します。マップ境界の LatLng 座標がサーバーに送信され、データベースで見つかったマーカー座標が Ajax 呼び出しから返されます。マーカーの座標は、クライアントで配列に読み込まれ、マップに書き込まれます。マーカー クラスタラーを使用して、混雑したマーカーを回避しました。

これが役立つことを願っています。ただし、使用しているプラ​​グインの利点はわかりません。

于 2013-09-11T13:13:55.667 に答える