如何使用动态调用json为谷歌地图api v3添加更多标记

时间:2013-11-07 05:07:05

标签: javascript json google-maps google-maps-api-3

我有一个.net mvc 3网站, 在我的StoreModel中:

 public class StoreModels 
{
    public string StoreName { get; set; }
    public decimal LongTit { get; set; }
    public decimal LatTit { get; set; }
    public int zIndex { get; set; }
}

和我的家庭控制器

 public ActionResult getBeach() {
        List<StoreModels> lstStore;
        StoreModels strMod = new StoreModels();

        lstStore = new List<StoreModels>() { 
            new StoreModels(){ StoreName = "cua hang 1",
                LatTit=20.998324m,
                LongTit=105.813708m,
                zIndex=1
            },
            new StoreModels(){ StoreName = "cua hang 2",
                LatTit=220.998485m,
                LongTit=105.812903m,
                zIndex=2
            },
            new StoreModels(){ StoreName = "cua hang 3",
                LatTit=20.982342m,
                LongTit=107.887392m,
                zIndex=3
            }
            };
        return Json(lstStore, JsonRequestBehavior.AllowGet);


    }

并在我的索引中:

<script type="text/javascript">
$(document).ready(function () {
    // execute
    (function () {
        // map options
        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(20.998825, 105.81473),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'),
                                      mapOptions);
        var image = {
            url: 'img/here.png',

            size: new google.maps.Size(50, 50),

            origin: new google.maps.Point(0, 0),

            anchor: new google.maps.Point(0, 32)
        };
        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18, 1],
            type: 'poly'
        };
        var infowindow;
        $.getJSON('Home/getBeach', null, function (model) {
            for (var i = 0; i < model.length; i++) {
                var myLatLng = new google.maps.LatLng(model[i].LatTit,model[i].LongTit);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image,
                    shape: shape,
                    title: model[i].StoreName,
                    zIndex: i + 1,
                });
                google.map.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        });
    })();
});

我在herehere中看到了一些流程示例,但在我的网站上,地图上只显示了一个标记。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

您的问题可能与经度/纬度数据有关。尝试在最后没有m的情况下传递它们。

       new StoreModels(){ StoreName = "cua hang 2",
            LatTit=220.998485,
            LongTit=105.812903,
            zIndex=2
        }

或通过添加parseFloat()来更改此行的Javascript来执行相同的操作:

var myLatLng = new google.maps.LatLng(parseFloat(model[i].LatTit),parseFloat(model[i].LongTit));