Question

我正在尝试从数据库创建标记。我这样做是通过将DB结果输出到json并在google地图代码中加载json。 JSON有效且正在加载。

我的完整Google地图代码为：

google.load("maps", "2");

// make a json request to get the map data from the Map action
$(function() {
if (google.maps.BrowserIsCompatible()) {
    $.getJSON("/GoogleMaps/Map", initialise);
}
});

function initialise(mapData) {

var map = new google.maps.Map2($("#map")[0]);
    map.addControl(new google.maps.SmallMapControl());
    map.addControl(new google.maps.MapTypeControl());
    map.setMapType(G_SATELLITE_MAP);

    var latlng = new google.maps.LatLng(52.370, 4.893);
    var zoom = 8;

    map.setCenter(latlng, zoom);

map.setCenter(latlng, zoom);

$.each(mapData.locations, function(i, location) {
    setupLocationMarker(map, location);
});
}

function setupLocationMarker(map, location) {
console.debug(location.LatLng);
var latlng = new google.maps.LatLng(location.LatLng);
var marker = new google.maps.Marker(latlng);
map.addOverlay(marker);
}

JSON：

{
"locations": [
    {
        "Id": 1,
        "Name": null,
        "LatLng": "52.368, 4.806",
    },
    {
        "Id": 2,
        "Name": null,
        "LatLng": "52.333, 4.839",
    },

我曾尝试使用Firebug进行调试，但我没有遇到任何错误。坐标似乎加载得很好。但是只显示了一个标记，并且该标记实际上并未附加到它看起来的任何坐标上（如果缩小它不是必须的）。此时地图也很慢。有谁知道如何解决这个问题？

Answer 1

试试这个对我有用

 function setupLocationMarker(map, location) {
    console.debug(location.LatLng);
    var point = new GLatLng(location.LatLng);       
    var marker = new GMarker(point);
    map.addOverlay(marker);
 };

嗯，这是一个很好的策略点，我使用jquery你需要在你的api密钥中使用

看看你是否能从这个

得到你需要的东西

    <script type="text/javascript" src="http://www.google.com/jsapi?key=your_Key_goes_here"></script>
    <script type="text/javascript" charset="utf-8">
        google.load("maps", "2.x");
        google.load("jquery", "1.4.2");
    </script>
    <script>


    $(document).ready(function(){
        //setup the map
        var map = new GMap2(document.getElementById('map'));
        var state_college = new GLatLng(40.802,-77.833);
        map.setCenter(state_college, 11);

        var geo = new GClientGeocoder();

        var reasons=[];

        reasons[G_GEO_SUCCESS]            = "Success";
        reasons[G_GEO_MISSING_ADDRESS]    = "Missing Address";
        reasons[G_GEO_UNKNOWN_ADDRESS]    = "Unknown Address.";
        reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address";
        reasons[G_GEO_BAD_KEY]            = "Bad API Key";
        reasons[G_GEO_TOO_MANY_QUERIES]   = "Too Many Queries";
        reasons[G_GEO_SERVER_ERROR]       = "Server error";


        var bounds = new GLatLngBounds();

        $("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));   
        var mapdata = {
            "Locations":[
                {
                    "id":"6",
                    "name":"Old Main",
                    "lat":"40.79648590088",
                    "lng":"-77.86285400391"
                },
                {
                    "id":"7",
                    "name":"Somewhere Further",
                    "lat":"42.65258026123",
                    "lng":"-73.75623321533"
                }

        ]}


            if (mapdata.Locations.length > 0) {
                for (i=0; i<mapdata.Locations.length; i++) {
                    var location = mapdata.Locations[i];
                    addLocation(location);
                }
                zoomToBounds();
            }


    function addLocation(location) {
        var point = new GLatLng(location.lat, location.lng);       
        var marker = new GMarker(point);
        map.addOverlay(marker);
        bounds.extend(marker.getPoint());
        GEvent.addListener(marker, "click", function(){
                showMessage(marker, location.name);
        });

    }


        function showMessage(marker, text){
            var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());
            $("#message").hide().fadeIn()
            .css({ top:markerOffset.y, left:markerOffset.x })
            .html(text);
            map.panTo(marker.getLatLng());
        }

        function zoomToBounds() {
            map.setCenter(bounds.getCenter());
            map.setZoom(map.getBoundsZoomLevel(bounds)-1);
        }
    });
    </script>
</head>
<body>
    <div id="map"></div>
    <ul id="list"></ul>
    <div id="message" style="display:none;"></div>

</body>

从JSON创建标记时出现问题

1 个答案: