jQuery,JSON,PHP和gMap

前端之家收集整理的这篇文章主要介绍了jQuery,JSON,PHP和gMap前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_502_1@1)我有一个网站,使用jQuery和 gMap Google Maps插件。这一切都很完美,我的标记设置正确,我真的很喜欢这个解决方案。这是它的样子:
<script type="text/javascript" src="http://www.google.com/jsapi?key=MyGmapKey"></script>
    <script type="text/javascript">
        google.load("jquery",'1.3');
        google.load("maps");
    </script>
    <script type="text/javascript" src="/code/js/jquery.gmap-1.1.0-min.js"></script>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $("#map1").gMap(
            {
                latitude:               48.7,longitude:              13.4667,zoom:                   9,markers:                [{latitude: 48.461117,longitude: 13.418795,html: "MY Info Box 1"},{latitude: 48.531602,longitude: 12.942087,html: "Another Info Box"},{latitude: 48.198242,longitude: 13.536017,html: "Guess what? This is INFO Text!"},{latitude: 48.325327094,longitude: 14.0712547302,html: "INFO"},{latitude: 48.7,longitude: 13.4667,icon: { image:  "images/My_Position.png",iconsize: [20,34],iconanchor: [5,infowindowanchor: [5,2],infoshadowanchor: [14,25] },html: "Your current position: 48.7 | 13.4667,Germany"}],controls:               ["GSmallZoomControl3D","GMapTypeControl"],scrollwheel:            true,maptype:                G_HYBRID_MAP,html_prepend:           '<div class="gmap_marker">',html_append:            '</div>',icon:
                {
                  image:              "images/gmap_pin.png",shadow:             false,iconsize:           [19,21],shadowsize:         false,iconanchor:         [4,19],infowindowanchor:   [8,2]
                }
            });
        //Trailing "}" missing here...
    </script>
    <style type="text/css" media="screen">
         #map1{ float:left; width:500px; height:500px; overflow:hidden; margin: 20px; }
        .gmap_marker { font-family:Geneva,Arial,Helvetica,sans-serif; color:#0000CC; }
    </style>
    <Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
    <div id="map1"></div>
</body>
</html>

现在我的问题:

添加了一个“onmoveend”功能,可以从外部文件获取新的“标记”数据。所有的作品都很棒,只是标记不正确,只有最后的项目才会显示。我敢打赌这只是一件小事,但现在我失去了…

这是我做的:

2)我添加了这个脚本:

if (GBrowserIsCompatible())
{
    var map = $gmap;
    var center = new GLatLng(<?=$_GET['lat']?>,<?=$_GET['lon']?>);

    GEvent.addListener(map,"moveend",function()
    {
        map.clearOverlays();
        var center = map.getCenter();
        var marker = new GMarker(center,{draggable: true});
        map.addOverlay(marker);
        var lat = center.lat();
        var lng = center.lng();
        document.getElementById("lat").value = lat;
        document.getElementById("lng").value = lng;

        GEvent.addListener(marker,"dragend",function()
        {
            var point=marker.getPoint();
            map.panTo(point);
            var lat = point.lat();
            var lng = point.lng();
            document.getElementById("lat").value = lat;
            document.getElementById("lng").value = lng;
        });

        $.getJSON('loader.PHP',{ lat: lat,lng: lng,rad: <?=$rad?>},function(data) {
        $("#map").gMap(
        {
            latitude:               lat,longitude:              lng,markers:                [data],//"GScaleControl",icon:
            {
              image:              "images/gmap_pin.png",2]
            }
        });
    });
});

还有一些HTML:

<div id="map" style="float:left; width:500px; height:500px; overflow:hidden; margin: 20px;"></div>
Current coordinates: <br>
<b>Latitude:</b> <input type="text" size="34" name="latitude" value="" id="lat" /><br>
<b>Longitude:</b><input type="text" size="34" name="longitude" value="" id="lng" />

如果你移动第一张地图,我会显示一个第二个地图,“应该”保存loader.PHP返回的新标记

loader.PHP

数据库获取新的“靠近我”条目,然后“构建”类似于示例1中使用的字符串。

这是它的样子:

$MyNewPositionMarker.='{latitude: '. $_GET['lat'].',longitude: '. $_GET['lng'].',html: "'.$html.'"},' ;
//Getting database results while
while($row = MysqL_fetch_assoc($result))
{
    $markers.='{latitude: '.$row['odin_facility_lat'].',longitude: '.$row['odin_facility_lon'].',' ;
}

echo $markers.$MyNewPositionMarker

loader.PHP返回的值根据示例1)“看起来”它们应该是什么样子。

我想,我的问题是与$ .getJSON和某种“编码/解码”问题有关,但是我花了整整一个晚上来回尝试(“normal $ .get”),loader.PHP中的不同返回格式,但都不成功。

现在,看起来不错,但不幸的是我只是在我的地图上找到了LAST标记。 jQuery插件,即“设置”标记可以在这里找到:http://gmap.nurtext.de/js/jquery.gmap-1.1.0.js

(我转过身来,希望你们有一些澄清…)

解决方法

在Loader.PHP中只是一件小事:
echo "[".$markers.$MyNewPositionMarker."]"; 
//and removed the [] at the position when loading the new map: WRONG... markers: [data],... RIGHT: ... markers: data,...

(这只是在评论解决方案的复制粘贴,以从“未回答的”列表中删除该问题。)

猜你在找的jQuery相关文章