从数据库中获取坐标在谷歌地图上绘制路线

Question

下面是一张地图，展示了我想要实现的输出类型。

但是，当我从数据库中获取坐标时，我不知道如何在 Google 地图上绘制坐标以获得这种类型的输出。我使用此代码，但我不知道如何从数据库中将坐标放入此代码中。

var MapPoints = '[{"address":{"address":"plac Grzybowski, Warszawa, Polska","lat":"52.2360592","lng":"21.002903599999968"},"title":"Warszawa"},{"address":{"address":"Jana Paw\u0142a II, Warszawa, Polska","lat":"52.2179967","lng":"21.222655600000053"},"title":"Wroc\u0142aw"},{"address":{"address":"Wawelska, Warszawa, Polska","lat":"52.2166692","lng":"20.993677599999955"},"title":"O\u015bwi\u0119cim"}]';


var MY_MAPTYPE_ID = 'custom_style';

function initialize() {

  if (jQuery('#map').length > 0) {

    var locations = jQuery.parseJSON(MapPoints);

    window.map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    });

    var infowindow = new google.maps.InfoWindow();
    var flightPlanCoordinates = [];
    var bounds = new google.maps.LatLngBounds();

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng),
        map: map
      });
      flightPlanCoordinates.push(marker.getPosition());
      bounds.extend(marker.position);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i]['title']);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

    map.fitBounds(bounds);

    var flightPath = new google.maps.Polyline({
      map: map,
      path: flightPlanCoordinates,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

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

Answer 1

您正在向地图添加标记，以便提取它们的坐标来制作折线。你可以剪掉中间人，用LatLngs来做折线。

$('document').ready(function() {
    initialize();
});
// You don't need google.maps.event.addDomListener(window, 'load', initialize);
// if you use jQuery's $(document).ready() function.

function initialize() {

    var flightPathCoordinates = [];

    // Get the data from the server.
      $.get(
        "url/of/serverScript.php", // Wherever you're getting your var MapPoints JSON.
        function(response) {
            var locations = $.parseJSON(response);
            var coordinatePair;

            for (i = 0; i < locations.length; i++) {
                coordinatePair = new google.maps.LatLng(locations[i].address.lat,
                                               locations[i].address.lng);
                flightPathCoordinates.push(coordinatePair);
            }
      }); // end $.get()

    // Create the map.
    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false
    });

    // Create the polyline.
    var flightPath = new google.maps.Polyline({
      map: map,
      path: flightPlanCoordinates,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

    // Add it to the map.
    flightPath.setMap(map);
}

注意：您可以使用$ 代替jQuery。例如这些是等价的：jQuery('#map')$('#map')