标记不显示在谷歌地图上,但在控制台没有错误

Markers not displaying on google map, but no errors in console

本文关键字:控制台 有错误 谷歌地图 显示      更新时间:2023-09-26

已经把我的头发拔出来了一段时间:试图使用json从我的数据库中获取后期/液化天然气值,然后使用这些值将标记输出到谷歌地图上。目前地图显示没有标记,控制台也没有错误。任何帮助将非常感激!

 <script type="text/javascript">
       var map = null;
       function addMarker(lat,lng) {
             marker = new google.maps.Marker({
             position: new google.maps.LatLng(lat,lng),
             map: map,
           });
     }

      function initialize() {
      var mapOptions = {
      center: {lat: 54.872128, lng: - 6.284874},
      zoom: 13
     };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
   $(document).ready(function(){
   $.getJSON('MarkersController.php', function(data){

         var locations = JSON.parse(data);
         for(var i =0; i<locations.length; i++){
               addMarker(locations['lat'], locations['lng']);
      }
});
});

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

从mysql中检索的php脚本:

<?php
include('DB_INFO.php');
// Opens a connection to a MySQL server.
$connection = mysqli_connect($server, $username, $password);
if (!$connection) {
    die('Not connected : ' . mysqli_error());
}
// Sets the active MySQL database.
$db_selected = mysqli_select_db($database, $connection);
if (!$db_selected) {
    die('Can''t use db : ' . mysqli_error());
}
// Selects all the rows in the markers table.
$query = 'SELECT * FROM tester';
$result = mysqli_query($query);
if (!$result) {
    die('Invalid query: '. mysqli_error());
}
$list = array();
while ($row = mysqli_fetch_assoc($result)) {
    $list[] = $row;
}
header('Content-Type: application/json');
echo json_encode($list);
?>

如果你有一个标记集合,我认为你应该使用这种方式迭代集合并分配i元素:

for(var i =0; i<locations.length; i++){
  addMarker(locations[i].lat, locations[i].lng);
}

概念验证

你可以试一试,改成如下。

while ($row = mysqli_fetch_assoc($result)) {
    //Assuming "lat" is column name in tester table. Please change it if required.
    $lat= $rows['lat'];
    //Assuming "lng" is column name in tester table. Please change it if required.
    $lng= $rows['lng'];
    $list[] = array('lat' => $lat, 'lng' => $lng);
}

我使用原型制作,代码更加清晰。一个例子(假设你正在使用jquery):

创建3个脚本:

    <
  1. 地图脚本/gh><
  2. JSONParser脚本/gh>
  3. 主脚本

首先为google maps创建原型函数:

 var MapUtil = (function($) {
    var mapProp = {
        center: new google.maps.LatLng(-38.4529181, -63.5989206),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    /**
     * @returns
     * Maps options for create a google map
     */
    function getMapProperties() {
        return mapProp;
    }
    /**
     * Create simple marker
     * @param lat
     * Latitude for the marker
     * @param lng
     * Longitude for the marker
     * @param myMap
     * Actual map
     * @returns
     * Return a new google map marker
     */
     function simpleMarker(lat, lng, myMap) {
         var marker = new google.maps.Marker({
             //add the marker options
             position: new google.maps.LatLng(lat, lng),
             draggable:true,
             animation: google.maps.Animation.DROP,
             map: myMap,
         });
        return marker;
     }
    return {
        getMapProperties: getMapProperties,
        simpleMarker: simpleMarker,
    };
})(jQuery);

然后创建JSONParser将JSON转换为javascript对象:

var JSONParser = (function($){
    /**
     * @return An array with the markers parsed
     */
    function getMarkers(json) {
        var markers = [];
        for (int i = 0; i < json.length; i++) {
            markers.push({json[i].lat,json[i].lng});
        }
        return markers;
    }
    return {
        getMarkers : getMarkers,
    };
})(jQuery);

和你的主脚本:

$(document).ready(function() {
    var myMap = null;
    //add the map to the page
    google.maps.event.addDomListener(window, 'load', initialize);
    /**
     * Init Google Maps
     */
    function initialize() {
        var map=new google.maps.Map(document.getElementById("googleMap"), 
                MapUtil.getMapProperties());
        myMap = map;
        createMarkers();
    }
    function createMarkers() {
        //retrieve the information
        $.ajax({             
            type: 'post',
            url: 'MarkersController.php',
            data: {},
            success: function (data) {
                var json= $.parseJSON(data);
                var markers = JSONParser.getMarkers(json);
                for (var i = 0; i < markers.length; i++) {
                    MapUtil.simpleMarker(marker[i].lat, marker[i].lng, myMap);
                }
            }
        });
    }
});

然后按以下顺序将脚本添加到html中:

<script src="...path.../map-utils.js"></script>
<script src="...path.../json-pareser.js"></script>
<script src="...path.../main.js"></script>

关于map或json的其他功能添加额外的方法!

你想用这样的东西:

google.maps.event.addListenerOnce(map, 'idle', function(){
  // Code Here..but jquery might load first or last.. see below.
});

如果我没弄错的话,你的DOM在你的地图之前准备好了。我通常创建一个函数被调用两次,第二次调用它加载JS…所以第一个调用通常是jQuery,第二个是maps ready..然后运行任何与map相关的代码。

我如何做的例子…用最基本的术语来说……

var iLoadPoints = 0;
function mapReady() {
    if (iLoadPoints==2) {   // Map & jQuery Ready To Use
        // RUN CODE HERE... At this point, run the getJSON and so on...
    } else {    // Loader Not Ready... Escape function and ignore until next call
        return false;
    }
}
$(function() {
    iLoadPoints += 1;
    mapReady();
});
google.maps.event.addListenerOnce(map, 'idle', function(){
    iLoadPoints += 1;
    mapReady();
});

我假设如果你回声的晚/长,以安慰你得到他们…如数据正确存在

EDIT:正如刚才所建议和注意到的,循环确实需要使用i变量来选择循环中的当前项,如scaisEdge所示/

for(var i =0; i<locations.length; i++){
    addMarker(locations[i].lat, locations[i].lng);
}

修改自你的评论:我相信更多的是这样的…

var iLoadPoints =0; 
function mapReady(){ 
    if(iLoadPoints === 2){
        initialize(); 
    }else {
        return false;
    }
} 
google.maps.event.addListenerOnce(map, 'idle', function(){ 
    iLoadPoints+=1; 
    mapReady(); 
}); 
google.maps.event.addDomListener(window, 'load', function(){
    iLoadPoints+=1; 
    mapReady(); 
}); 

你也可以把mapReady缩短为…

function mapReady(){ 
    if(iLoadPoints === 2) initialize(); 
} 

整个想法是mapReady是一个简单的捕获…可以将if语句添加到初始化函数中。同样的效果,整个概念是你需要等待两个不同时间的Ready事件,它可以用两个布尔值或其他方法来完成。

在过去的测试中,如果我从我的本地主机加载一个网站,并有像谷歌地图..本地的jQuery将是即时的,而gmap将永远落后。因此,有时我会遇到加载已经配置的/数据驱动的地图失败。

或进一步…

var iLoadPoints =0; 
google.maps.event.addListenerOnce(map, 'idle', function(){ 
    iLoadPoints+=1; 
    if (iLoadPoints===2) initialize(); 
}); 
google.maps.event.addDomListener(window, 'load', function(){
    iLoadPoints+=1; 
    if (iLoadPoints===2) initialize(); 
});