从谷歌地图上的 JSON 更新标记

Posted 2023-02-24

【中文标题】从谷歌地图上的 JSON 更新标记

【英文标题】：update markers from JSON on google maps

【发布时间】：2016-02-12 13:01:41

【问题描述】：

Django 1.8 和 python 2.7。 我正在尝试使用 jQuery 和 Ajax 更新标记的位置。

我的 json 对象只有一个数组：

["latitud": "55.75222", "ciudad": "Moscu", "longitud": "37.61556"]

初始化地图后，我创建了这个函数来设置标记，并且我使用 setTimeout 来获取新的标记位置。

function setMarker(map) 

    $.getJSON('http://127.0.0.1:8000/maps/car/gpspos/', function(userPos) 
        userLat = userPos["userPosView"][0].latitud;
        userLon = userPos["userPosView"][0].longitud;
        var position = new google.maps.LatLng(userLat,userLon);
        var marker = new google.maps.Marker(
            position: position,
        );
        marker.setMap(map)


        // A function that checks if the user has a new position and set marker there
        $(document).ready(function()
            setTimeout(function() 
                (marker.getPosition());
            ,5000);
        );
    );

结果是当新的纬度和经度值输入到数据库时，我无法获得新的位置。 如果有人可以帮助我，我将不胜感激

【问题讨论】：

经纬度值如何输入到数据库中？

目前我正在手动输入，但将来应用程序会发送此值。

【参考方案1】：

将之前的 lat、long 保存在一个变量中，并在您再次向 db 询问时检查它。

var lat, lng;

function setMarker(map) 

    $.getJSON('http://127.0.0.1:8000/maps/car/gpspos/', function(userPos) 
        userLat = userPos["userPosView"][0].latitud;
        userLon = userPos["userPosView"][0].longitud;
        if(lat == null) lat = userLat; 
        if(lng == null) lng = userLat; 
        if(userLat != lat && userLon != lng)
            lat = userLat;
            lng = userLong;

            //do stuff
            Console.log("lat lng changed");
        
        var position = new google.maps.LatLng(userLat,userLon);
        var marker = new google.maps.Marker(
            position: position,
        );
        marker.setMap(map)
    );

我猜你是在要求 db 调用 setMarker 方法。

【讨论】：

是的，我在函数 initializeMap() 中调用了 setMarker。

但是我想每 5 秒刷新一次页面，如果输入新位置，标记应该在新位置

那么最好的方法是使用 DataLayer，使用 map.data.loadGeoJson('http://..') 方法。每个由 ajax 方法发送的元素（由我的函数创建）都会被渲染，如果元素具有相同的 id，则位置会自动更新。

让我更好地解释一下。我有一个带有 sqlite db 的 django 服务器。在数据库中，我有许多数据，例如用户的纬度和经度。然后我进行查询，选择当前登录用户的最后纬度和经度，并将其解析为 JSON 格式。

在我的 javascript 中，我可以初始化谷歌地图并设置标记。但我想要的是每 5 秒检查一次 JSON，以便知道我登录用户的最后位置

【参考方案2】：

这是使用数据层的解决方案。

您可以使用 setTime 方法调用服务器：

var geoUrl = 'http://127.0.0.1:8000/maps/car/gpspos/';
$(document).ready(function()
    setTimeout(function() 
        map.data.loadGeoJson(geoUrl);
    ,5000);
);

但您必须以GeoJSON 格式从服务器发送 json

    "type": "FeatureCollection",
    "features": [
    
        "type": "Feature",
        "id": 2
        "geometry": 
            "type": "Point",
            "coordinates": [125.6, 10.1]
        ,
        "properties": 
            "name": "Dinagat Islands",
            "ciudad": "Moscu"
        
    
]

在对服务器的第二次调用中，每个特征都通过其 id 进行更新，因此如果在服务器端更改了位置，则位置将发生变化。

您还可以使用此方法更改样式，每个绘制的特征都会调用该方法。或者事件您可以获得该功能的属性

map.data.setStyle(function(feature)
  //getting property
  var ciudad = feature.getProperty('ciudad');

  //setting style for each feature
  return(
      icon: '//example.com/path/to/image.png',
      fillColor: 'green'
  );

);