Question

我正在寻找一种方法来将标记添加到我在网页中创建的地图上...以下是该页面的代码...

<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的区别 - 任何帮助都会感激不尽！

由于

Answer 1

我不知道GeoJSON，但这是您使用Google Maps v3 API处理它的方式：

对于一个标记：

        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调用返回在数据库中找到的标记coordindates。标记坐标将加载到客户端的数组中并写入地图。我使用标记聚类器来避免拥挤的标记。

我希望这会有所帮助。我不知道你正在使用的插件的好处。

Answer 2

我正在做类似的事情，这是我要做的事情。

我使用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模板，并使用它们以这种方式提取数据。我有一种感觉，这将是一个更好的方式，但我不确定。无论如何这可能对你有用，如果你对它有任何进一步了解，请告诉我:)）

将动态标记添加到mapbox映射文件。

2 个答案: