从JSON创建标记时出现问题 [英] Problem creating markers from JSON

问题描述

我试图从数据库创建标记。我通过将数据库结果输出到json并在谷歌地图代码中加载json来做到这一点。

我的完整Google地图代码是：

  google.load（maps，2）; 
 
 //创建一个json请求以从Map动作获取地图数据
 $（function（）{
 if（google.maps.BrowserIsCompatible（））{
 $ .getJSON（/ GoogleMaps / Map，初始化）; 
} 
}）; 
 
函数初始化（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）; 
}）; 
} 
 
函数setupLocationMarker（地图，位置）{
 console.debug（location.LatLng）; 
 var latlng = new google.maps.LatLng（location.LatLng）; 
 var marker = new google.maps.Marker（latlng）; 
 map.addOverlay（marker）; 
} 
  

JSON：

< pre $ {
locations：[
{
Id：1，
Name：null，
LatLng：52.368,4.806，
}，
{
Id：2，
Name：null，
LatLng： 52.333，4.839，
}，

我曾尝试使用Firebug进行调试，但没有发现任何错误。坐标似乎加载得很好。但是只有1个标记出现，并且该标记实际上并不附加到它看起来的任何坐标（如果缩小它并不公平）。此外，地图在这一点上非常缓慢。有没有人知道如何解决这个问题？

解决方案

试试这个对我有用

 函数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 / javascriptsrc =http://www.google。 COM / JSAPI键= your_Key_goes_here>？< /脚本> 
< script type =text / javascriptcharset =utf-8> 
 google.load（maps，2.x）; 
 google.load（jquery，1.4.2）; 
< / script> 
< script> 
 
 $ b $（document）.ready（function（）{
 //设置地图
 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 = []; 
 
原因[G_GEO_SUCCESS] =成功; 
原因[G_GEO_MISSING_ADDRESS] =缺少地址; 
原因[G_GEO_UNKNOWN_ADDRESS] =未知地址; 
原因[G_GEO_UNAVAILABLE_ADDRESS] =不可用地址; 
原因[G_GEO_BAD_KEY] =错误API密钥; 
原因[G_GEO_TOO_MANY_QUERIES] =太多查询 ; 
原因[G_GEO_SERVER_ERROR] =服务器错误; 
 
 
 var bounds = new GLatLngBounds（）; 
 
 $（＃message） .appendTo（map.getPane（G_MAP_FLOAT_SHADOW_PANE））; 
 var mapdata = {
 地点：[
 {
id：6，
name：Old Main，
lat：40.79648590088，
lng： -  77.86285400391
}，
 {
id：7，
name：某处更远，
 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（）; 
 
 
 
函数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（））; 
} 
 
函数zoomToBounds（）{
 map.setCenter（bounds.getCenter（））; 
 map.setZoom（map.getBoundsZoomLevel（bounds）-1）; 
} 
}）; 
< / script> 
< / head> 
< body> 
< div id =map>< / div> 
< ul id =list>< / ul> 
< div id =messagestyle =display：none;>< / div> 
 
< / body> 
  

I am trying to create markers from a database. I do this by outputting the DB results to json and loading the json in the google maps code. The JSON is valid and is being loaded.

My full Google maps code is:

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);
}

The JSON:

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

Ive tried debugging with Firebug but I get no errors. The coordinates seem to load just fine. But only 1 marker shows up, and that marker isn't actually attached to any coordinates it seems (if you zoom out it doesn't ajust). Also the map is very slow at this point. Does anyone know how to solve this?

解决方案

try this out it works for me

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

hmmm here is a good strating point I use jquery you'll need to sub in your api key

see if you can get what you need from this

    <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创建标记时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！