个人中心
gpt4 book ai didi

php - jQuery、JSON、PHP 和 gMap

转载 作者：IT王子 更新时间：2023-10-29 00:13:34 28 4
gpt4 key购买 nike

1) 我有一个网站，使用 jQuery 和 gMap谷歌地图插件。这一切都很完美，我的标记设置正确，我真的很喜欢这个解决方案。这是它的样子:

    <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, 34], 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,
            zoom:                   9,
            markers:                [data],
            controls:               ["GSmallZoomControl3D", "GMapTypeControl"], //"GScaleControl",
            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]
            }
        });
    });
});

还有一些 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" />

如果您移动第一张 map ，我会显示第二张 map ，其中“应该”包含 loader.php 返回的新标记。

loader.php:

它从数据库中获取新的“close to me”条目，然后“构建”类似于示例 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'].', html: "'.$html.'"},' ;
}

echo $markers.$MyNewPositionMarker

loader.php 返回的值“看起来”就像示例 1 中的那样)。

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

现在，它看起来不错，但不幸的是，我刚刚在我的 map 上设置了最后一个标记。可以在此处找到用于“设置”标记的 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, ...

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

关于php - jQuery、JSON、PHP 和 gMap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3475052/

28 4 0
文章推荐： linux - 如何在 Linux rpath 中编码可执行位置？
文章推荐： linux - 所有浏览器和操作系统的安全字体
文章推荐： linux - 为什么对 `poll` 的调用不能在 sysfs 设备属性文件上正确阻止？
文章推荐： php - 在 Zend Studio (Eclipse PDT) 中跨多个文件扩展的单个 JavaScript 对象的自动完成
IT王子
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com