Question

首先，我正在使用来自http://www.pittss.lv/jquery/gomap/examples/marker.php的库，我正在使用Web服务来获取数据。

我想在地图上找到这些信息，但我以前不知道，我将要创建多少元素。要获取数据，我有以下代码：

    $('#default-search').submit(function () {

    var gomap_marker = [];
    var search_where = $('#search-where').val();
    if ($('#search-where').val() == "")
        search_where = "-1";
    $.ajax({
        url: "http://my_url.com/",
        contentType: "json",
        data: {
            city: search_where
        },
        success: function (data) {

            //List received data
            $.each(data, function (index, item) {

                //create an array with data
                gomap_marker.push({
                    id: item.Id,
                    address: item.Street + ', ' + item.ZipCode + ' ' + item.City, 
                    icon: 'images/marker.png',
                    group: 'toshow',
                    html: '<a href="index.html">' + item.Street + ', ' + item.ZipCode + ' ' + item.City + '</a>'
                });
            }); // END - $.ajax success each

            // valid test
            for (var i = 0; i < gomap_marker.length; i++) {
                alert('1 - ' + gomap_marker[i].id + gomap_marker[i].address + gomap_marker[i].html);
            }

            // reset the map for each request
            $("#map").removeData();
            alert('Test');
            // map init + markers
            jQuery('#map').goMap({
                maptype: 'ROADMAP',
                zoom: 13,
                scaleControl: true,
                scrollwheel: false,
                markers: gomap_marker
            });
        }, // END - $.ajax success 
        error: function () { alert("simple request goes wrong"); }
    }); // END - $.ajax
    return false;
}); // END - default-search

只有我的数组的第一行在地图上创建一个标记。我不明白如何设置其他人。

我想使用$ .goMap.createMarker而不是创建数组并重置地图，但我遇到了同样的问题：只有第一行在地图上创建了一个标记。

此致

Answer 1

emm首先创建一个lat长的数组

    var data = new Array();
    data[0] = new Array();
    data[0][0] = 'FOOD'; //name
    data[0][1] = '23,23';//coordinates(lat,lng)

    function HTMLMarker( place ) {
           this.name = place[0];
           var latLngStrings = place[1].split(',');
           var lat = +latLngStrings[0];
           var lng = +latLngStrings[1];
           this.pos = new google.maps.LatLng( lat, lng );
    }
    HTMLMarker.prototype = new google.maps.OverlayView();
    HTMLMarker.prototype.onRemove = function () {};
    HTMLMarker.prototype.onAdd = function () {
    var div = this.div = document.createElement('DIV');
    div.className = "htmlMarker";
    div.innerHTML = '<a href="#" class="pin_on_map">'+this.name+'</a>';
                        var panes = this.getPanes();
                        panes.overlayImage.appendChild(div);
                    };
   HTMLMarker.prototype.draw = function () {
          var overlayProjection = this.getProjection();
          var position = overlayProjection.fromLatLngToDivPixel(this.pos);
          var panes = this.getPanes();
          this.div.style.left = position.x - 30 + 'px';
          this.div.style.top = position.y - 48 + 'px';
                    };

     function initialize() {
          var myLatLng = new google.maps.LatLng(23,23);
          var mapOptions = {
                            zoom: 15,
                            center: myLatLng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };

     var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

                        for (var i = 0; i < data.length; i++) {
                            addMarker( data[i] );
                        }

                        function addMarker( place ) {
                            var htmlMarker = new HTMLMarker( place );
                            htmlMarker.setMap(gmap);
                        }
                    }

                   google.maps.event.addDomListener( window, 'load', initialize );

这应该工作!! 我用php创建数组：

<script>
<?php $i = 0;
foreach($places as $place) {
     $pins = $place['pins']; //coordinates
     $name = $place['name'];
     echo "data[$i] = new Array();\n";
     echo "data[$i][0] = '" .$name. "';\n";
     echo "data[$i][1] = '" .$pins. "';\n";
  $i++;
} ?>
</script>

ALSO 在css中添加此

 .htmlMarker {
    position: absolute;
}

gomap插件，根据webservice添加多个标记

1 个答案: