如何使用 ajax 在 php 页面中添加来自 json 的标记？答案

【问题标题】：How add markers from json in php page with ajax?如何使用 ajax 在 php 页面中添加来自 json 的标记？
【发布时间】：2023-03-14 12:27:02
【问题描述】：

我正在尝试使用由单选按钮控制的 Google Maps api 在 php 页面中绘制标记。所有数据标记都正确加载（json），但地图未呈现。请参阅下面我尝试运行的代码。控制台上没有脚本异常，run() 方法正确返回所有 lat/lon/values 数据！

        <script>
            var latlng = { lat: 19.7999, lng: 42.5121 };
            var marker;
            var map;
            var markers=[];

            function addmarker(map, lat, lng, title ){
                  marker = new google.maps.Marker({
                  position:{ lat:lat,lng:lng },
                  title:title,
                  draggable:true,
                  map:map
                });
                markers.push( marker );
            }
            function initialize() {
                var mapCanvas = document.getElementById('mapArea');
                var mapOptions = {
                  center: latlng,
                  zoom: 19,
                  mapTypeId: google.maps.MapTypeId.SATELLITE
                }
            }
            google.maps.event.addDomListener(window, 'load', initialize);
            </script>
            <script>
                function run() {
                    var radio = "";
                    for (i = 0; i < document.getElementsByName('rd').length; i++) {
                        if (document.getElementsByName('rd')[i].checked) {
                            radio = document.getElementsByName('rd')[i].value;        
                        }        
                    }
                    initialize();
                    $.ajax({
                      dataType: 'JSON',
                      url: 'http://ws.net/data.php?' + radio,
                      success: function(data) {
                          markers.forEach( function( e,i,a ){
                             e.setMap( null ); 
                          });

                          for( var o in data ){
                            var lat=Number(data[o].lat);
                            var lng=Number(data[o].lon);
                            var val= data[o].value;                             
                            
                            addmarker.call( this, map, lat, lng, val );
                          }
                      },
                      error: function( err ){
                        console.log( err );  
                      }
                    })
                }                    
            
        </script>    

    <body  >       
       <form action="" method="post">
            <input type="radio" value="car" name="rd"  />Car.
            <input type="radio" value="bike" name="rd" />Bike
            <input type="button" value="send"  onclick="run();"/>
       </form>  
       <div id="mapArea" style="width: 1000px; height: 600px;"> </div>
    </body>
</html>

【问题讨论】：

标签： javascript json ajax google-maps

【解决方案1】：

在函数initialize()中，添加：

  map = new google.maps.Map(mapCanvas, mapOptions);

【讨论】：