Question

我有一个脚本（get_search_data.php），它根据关键字fname从数据库执行搜索。我希望根据搜索结果，地点应该显示在地图上（display_map.php）以及标记和弹出窗口以供参考。

features_for_office的表视图

id  fname  co_address_line1  co_address_line2  lat  lon

get_search_data.php

<?php
    require 'config.php';

    try {
        $db = new PDO($dsn, $username, $password);

        $db->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

        $fname = $_POST['fname'];    

        $sth = "SELECT * FROM features_for_office WHERE fname LIKE :fname ";

        $stmt = $db->prepare($sth);
        $stmt->bindValue(':fname', '%' . $fname . '%', PDO::PARAM_STR);
        $stmt->execute();

        $locations = $stmt->fetchAll();
        echo json_encode( $locations );

    } catch (Exception $e) {
        echo $e->getMessage();
    }
?>

<script src="jquery-1.11.1.js"></script>


<script>
$(document).ready(function(){
    $('#drop2').on('change',function(){
         //var fname = $(this).val();
         var fname = $(this).find('option:selected').text(); 
         // rename your file which include $fname  with get_search_data.php
         if(fname !== ""){
            $.post('display_map.php',{fname: fname},function(data){
            $('.showsearch').html(data);
            });
          }
    });
});
</script>

display_map.php

<style type="text/css">
    #main { padding-right: 15px; }
    .infoWindow { width: 220px; }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script>
        function makeRequest(url, callback) 
            {
                var request;
                if (window.XMLHttpRequest) 
                    {
                        request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
                    } 
                else 
                    {
                        request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
                    }
                request.onreadystatechange = function() 
                    {
                        if (request.readyState == 4 && request.status == 200) 
                            {
                                callback(request);
                            }
                    }
                request.open("GET", url, true);
                request.send();
            }

            var map;

            // Ban Jelačić Square - City Center
            var center = new google.maps.LatLng(21.0000, 78.0000);

            var geocoder = new google.maps.Geocoder();
            var infowindow = new google.maps.InfoWindow();

            function init() 
                {
                    var mapOptions = 
                        {
                            zoom: 6,
                            center: center,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        }

                    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                    makeRequest('get_search_data.php', function(data) 
                        {
                            var data = JSON.parse(data.responseText);
                            for (var i = 0; i < data.length; i++) 
                                {
                                    displayLocation(data[i]);
                                }
                        });
                }
            function displayLocation(location) 
                {
                    var content =   '<div class="infoWindow"><strong>'  + location.fname + '</strong>'
                    + '<br/>'     + location.co_address_line1
                    + '<br/>'     + location.co_address_line2 + '</div>';

                    if (parseInt(location.lat) == 0) 
                        {
                            geocoder.geocode( { 'address': location.co_address_line1 }, function(results, status) 
                                {
                                    if (status == google.maps.GeocoderStatus.OK) 
                                        {
                                            var marker = new google.maps.Marker
                                                ({
                                                    map: map, 
                                                    position: results[0].geometry.location,
                                                    title: location.name
                                                });

                                            google.maps.event.addListener(marker, 'click', function() 
                                                {
                                                    infowindow.setContent(content);
                                                    infowindow.open(map,marker);
                                                });
                                        }
                                });
                        } 
                    else 
                        {
                            var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon));
                            var marker = new google.maps.Marker
                                ({
                                    map: map, 
                                    position: position,
                                    title: location.name
                                });

                            google.maps.event.addListener(marker, 'click', function() 
                                {
                                    infowindow.setContent(content);
                                    infowindow.open(map,marker);
                                });
                        }
                }
        </script>
</head> 
<body  onload="init();">    
    <section id="main">
        <div id="map_canvas" style="width: 70%; height: 500px;"></div>
    </section>
</body>

虽然地图会显示但标记不会显示。非常感谢任何帮助

Answer 1

这可能是一个奇怪的答案，但你的代码应该有效。但是如果你在数据库中混合使用lat和lon，标记仍会显示，但你不会看到它们，因为它们出现在世界的另一个地方。如果我错了，请从php脚本

发布json响应的结构

从数据库中获取数据后在谷歌地图上显示标记

1 个答案: