javascript - 通过PHP从MySQL提取位置进行地址解析

我编写了以下PHP脚本来从MySQL数据库获取值：

<?php
$user="root";
$password="password";
$dbh = new PDO("mysql:host=localhost;dbname=muzicmap", $user, $password);

$sql = "SELECT DISTINCT (
                `name`
                ) AS `name` , `id` , `location` , `background` , `genre` , `current_members` , `website` , `image` , `lonlat`
                FROM `artist`
                WHERE `location` LIKE '%Los Angeles%'
                LIMIT 10
                ";

$result = $dbh->query($sql)->fetchAll(PDO::FETCH_ASSOC);
//To output as-is json data result
//header('Content-type: application/json');
//echo json_encode($result);

//Or if you need to edit/manipulate the result before output
foreach ($result as $row){
    $return[]=array('id' => $row['id'],'name'=>$row['name'],'location'=> $row['location'],'background' => $row['background'], 'genre' => $row['genre'],'current_members'=>$row['current_members'],'website' => $row['website']);
}
$dbh = null;

header('Content-type: application/json');
echo json_encode($return);
?>

现在，我做了一个页面，我要在其中实现三件事：
1.在我的json的location字段中对位置进行地址解析。
2.在Google地图上放置标记。
3.完成所有操作后，制作一个可绘制的类型对象。

所以我写了以下内容：

    markers= []
    var geocoder;

    function initialize() {
        var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(40.2859268188,-75.9843826294)
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);
        var drawingManager = new google.maps.drawing.DrawingManager({
            drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                    google.maps.drawing.OverlayType.CIRCLE,
                ]
                },
        circleOptions: {
        fillColor: '#FFFF00',
        fillOpacity: 0,
        strokeWeight: 1,
        clickable: false,
        editable: true,
        zIndex: 1
            }
        });
        drawingManager.setMap(map);
        google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
                    var IDs=[];
                    for(var k in markers){
                        if(google.maps.geometry.spherical
                            .computeDistanceBetween(circle.getCenter(),markers[k].getPosition())
                            <=circle.getRadius()){
                            IDs.push(k);
                        }
                    }
        });

   $(function ()
         {
     $.ajax({
      url: 'jsonTest.php',                  //the script to call to get data
      data: "",
      dataType: 'json',
      success: function(data)
        {
                         adMarker(map, data);
            }
           });
        });
    }

      function adMarker(map,json1){
        geocoder= new google.maps.Geocoder();
        for (var i = 0; i < (json1.length); i++) {
        geocoder.geocode({'address':json1[i]['location']},function(results,status){
                if (status == google.maps.GeocoderStatus.OK){
                    var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,
                    title: json1[i]['names'],
                    zIndex: json1[i]['id']
                    });
                    markers.push(marker);
                }else {
                    alert("Something wrong");
                }

        });
    }

  }

      google.maps.event.addDomListener(window, 'load', initialize);

进行地理编码后，将标记放置在地图上时，我没有得到预期的结果。当我调试它时，我发现应该对地理编码和创建标记的代码片段未在for迭代中运行。这是为什么？我是javascript新手，对解决此问题的所有帮助非常感谢。

调试器中的错误虽然说：

InvalidValueError: setZIndex: not a number

最佳答案

我解决了问题。

因为adMarker（）中有一个异步调用。我制作了一个函数，以便在每个迭代中都复制该函数，因为异步调用仅在迭代完成后才能运行。这样，所有带有副本的迭代都将运行。更新的代码：

function adMarker(map,json1){

        geocoder= new google.maps.Geocoder();
        for (var i = 0; i < (json1.length); i++) {
        abc(i, json1, map);
            }

      }
      function abc (index, json1, map){
        var current_index = index;
        geocoder.geocode({'address':json1[index]['location']},function(results,status){

                if (status == google.maps.GeocoderStatus.OK){
                    var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,
                    title: json1[index]['names'],
                    zIndex: parseInt(json1[index]['id'])
                    });
                    markers.push(marker);
                }else {
                    alert("Something wrong");
                }
        });
        }