0

我正在尝试使用 php 和 mysql 在 Windows 地图上动态放置标记。我来自 db 的数据是 json 格式，并且 php 工作正常。

它是 get_locations。php 并给出如下输出：

[{
    "id": "5",
    "0": "5",
    "name": "Pan Africa Market",
    "1": "Pan Africa Market",
    "address": "1521 1st Ave, Seattle, WA",
    "2": "1521 1st Ave, Seattle, WA",
    "lat": "18.563574",
    "3": "18.563574",
    "lng": "73.801155",
    "4": "73.801155",
    "type": "toilet",
    "5": "toilet"
}, {
    "id": "6",
    "0": "6",
    "name": "Buddha Thai & Bar",
    "1": "Buddha Thai & Bar",
    "address": "2222 2nd Ave, Seattle, WA",
    "2": "2222 2nd Ave, Seattle, WA",
    "lat": "19.865541",
    "3": "19.865541",
    "lng": "75.346642",
    "4": "75.346642",
    "type": "toilet",
    "5": "toilet"
}, {
    "id": "7",
    "0": "7",
    "name": "The Melting Pot",
    "1": "The Melting Pot",
    "address": "14 Mercer St, Seattle, WA",
    "2": "14 Mercer St, Seattle, WA",
    "lat": "18.574535",
    "3": "18.574535",
    "lng": "73.802521",
    "4": "73.802521",
    "type": "toilet",
    "5": "toilet"
}]

但是具有 ajax 和 js 的 map.html 不能正常工作。

在控制台上，没有任何内容显示为错误。所以我无法弄清问题所在。

你们中的任何人都可以看看吗？

下面是我的map.html

 <!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Google Maps Example</title>
        <style type="text/css">
            body { font: normal 14px Verdana; }
            h1 { font-size: 24px; }
            h2 { font-size: 18px; }
            #sidebar { float: right; width: 30%; }
            #main { padding-right: 15px; }
            .infoWindow { width: 220px; }
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
        //<![CDATA[


        var map;

        // Ban Jelacic Square - Center of Zagreb, Croatia
        var center = new google.maps.LatLng(18.520510, 73.856733);

        function init() {

    var mapOptions = {
      zoom: 13,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    makeRequest('get_locations.php', function(data) {

        var data = JSON.parse(data.responseText);

        for (var i = 0; i < data.length; i++) {
            displayLocation(data[i]);
        }
    });
}

    function displayLocation(location) {
//alert ("inside disp loc");
    var content =   '<div class="infoWindow"><strong>'  + location.name + '</strong>'
                    + '<br/>'     + location.address
                    + '<br/>'     + location.description + '</div>';

    if (parseInt(location.lat) == 0) {
        geocoder.geocode( { 'address': location.address }, 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 {
    alert("lat is "+location.lat)
        var position = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lon));
        var icon= 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
          var html = "<b>" + location.name + "</b> <br/>";
         var infoWindow = new google.maps.InfoWindow;
        var marker = new google.maps.Marker({
            map: map,
            position: position,
            title: location.name,
            icon: icon

        });
        bindInfoWindow(marker, map, infoWindow, html);
//alert("marker created");
//        google.maps.event.addListener(marker, 'click', function() {
//            infowindow.setContent(content);
//            infowindow.open(map,marker);
//        });
       // alert("marker addd listener added");
    }
}

 function makeRequest(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}
    function bindInfoWindow(marker, map, infoWindow, html) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(html);
            infoWindow.open(map, marker);
          });
        }



        //]]>
        </script>
    </head>
    <body onload="init();">

        <h1>Places to check out in Zagreb</h1>

        <section id="sidebar">
            <div id="directions_panel"></div>
        </section>

        <section id="main">
            <div id="map_canvas" style="width: 70%; height: 500px;"></div>
        </section>

    </body>
</html>

请指导我。

4

1 回答 1

1

根据您的 JSON 文件，它应该是 location.lng 而不是 location.lon。我试过这样修复，现在可以了。

于 2013-03-07T14:32:25.963 回答