需要帮助，为谷歌地图多段线构建阵列

Need help, building array for google maps polylines

本文关键字：段线 构建 阵列 谷歌地图 帮助      更新时间：2024-02-16

我的谷歌地图脚本有一些问题。我有一个点击功能，我想在那里画一些多段线。如果我像示例所示那样预定义数组，效果会很好。

提要中的示例数据。

[{"latitude":"56.31092","longitude":"-16.42921"},{"latitude":"56.21234","longitude":"-15.96661"},{"latitude":"51.47044","longitude":"-0.47716"},{"latitude":"51.47044","longitude":"-0.47716"}]


    

google.maps.event.addListener(marker, 'click', function() {
info.open(map, marker);
var coords = [];
$.get('ajax.php?
type=flight_data&callsign='+value.callsign+'&departure='+value.planned_depairport+'&arrival='+value.planned_destairport+'',function(data){
$.each(data, function(key, value){
});
});


var flightPlanCoordinates = [
new google.maps.LatLng(51.31998, -4.84809),
new google.maps.LatLng(54.78397, -18.80557),
new google.maps.LatLng(55.49340, -36.09961),
new google.maps.LatLng(53.62062, -47.39679),
new google.maps.LatLng(45.37960, -66.45066),
new google.maps.LatLng(44.35434, -68.08823),
new google.maps.LatLng(28.43373, -81.31488)
];


var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#fca000',
strokeOpacity: 1.0,
strokeWeight: 3
});


flightPath.setMap(map);
});

Example with polyline from sample JSON data.

var data = [{"latitude":"56.31092","longitude":"-16.42921"},{"latitude":"56.21234","longitude":"-15.96661"},{"latitude":"56.13448","longitude":"-15.60909"},{"latitude":"56.03143","longitude":"-15.14082"},{"latitude":"55.94140","longitude":"-14.82629"},{"latitude":"55.84064","longitude":"-14.52696"},{"latitude":"55.70499","longitude":"-14.12847"},{"latitude":"55.59654","longitude":"-13.81463"},{"latitude":"55.44813","longitude":"-13.39472"},{"latitude":"55.33556","longitude":"-13.07998"},{"latitude":"55.18547","longitude":"-12.66326"},{"latitude":"55.07176","longitude":"-12.35495"},{"latitude":"54.95175","longitude":"-12.03340"},{"latitude":"54.78646","longitude":"-11.59632"},{"latitude":"54.66027","longitude":"-11.26603"},{"latitude":"54.53276","longitude":"-10.93882"},{"latitude":"54.40428","longitude":"-10.61447"},{"latitude":"54.23939","longitude":"-10.20243"},{"latitude":"54.10884","longitude":"-9.87899"},{"latitude":"53.97564","longitude":"-9.55623"},{"latitude":"53.81207","longitude":"-9.16469"},{"latitude":"53.67233","longitude":"-8.83361"},{"latitude":"53.53177","longitude":"-8.50614"},{"latitude":"53.35253","longitude":"-8.09463"},{"latitude":"53.21356","longitude":"-7.78002"},{"latitude":"53.06740","longitude":"-7.45441"},{"latitude":"52.92741","longitude":"-7.14329"},{"latitude":"52.77297","longitude":"-6.80649"},{"latitude":"52.63022","longitude":"-6.50089"},{"latitude":"52.43410","longitude":"-6.08510"},{"latitude":"52.28496","longitude":"-5.76677"},{"latitude":"52.19034","longitude":"-5.40902"},{"latitude":"52.12901","longitude":"-5.03247"},{"latitude":"52.08278","longitude":"-4.63482"},{"latitude":"52.03945","longitude":"-4.27098"},{"latitude":"51.99088","longitude":"-3.87572"},{"latitude":"51.94122","longitude":"-3.47960"},{"latitude":"51.89047","longitude":"-3.08773"},{"latitude":"51.84010","longitude":"-2.71022"},{"latitude":"51.75757","longitude":"-2.32244"},{"latitude":"51.66486","longitude":"-1.98045"},{"latitude":"51.57334","longitude":"-1.64512"},{"latitude":"51.50558","longitude":"-1.33356"},{"latitude":"51.47153","longitude":"-1.04251"},{"latitude":"51.45502","longitude":"-0.77477"},{"latitude":"51.46606","longitude":"-0.60582"},{"latitude":"51.47764","longitude":"-0.43669"},{"latitude":"51.47595","longitude":"-0.44661"},{"latitude":"51.47579","longitude":"-0.47241"},{"latitude":"51.47155","longitude":"-0.47874"},{"latitude":"51.47009","longitude":"-0.47874"},{"latitude":"51.47009","longitude":"-0.47874"},{"latitude":"51.47044","longitude":"-0.47716"},{"latitude":"51.47044","longitude":"-0.47716"},{"latitude":"51.47044","longitude":"-0.47716"},{"latitude":"51.47044","longitude":"-0.47716"}];
function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker = new google.maps.Marker({
    position: {
      lat: 56.31092,
      lng: -16.42921
    },
    map: map
  });
  map.setCenter(marker.getPosition());
  google.maps.event.addListener(marker, 'click', function() {
    // info.open(map, marker);
    var coords = [];
    // $.get('ajax.php?type=flight_data&callsign=' + value.callsign + '&departure=' + value.planned_depairport + '&arrival=' + value.planned_destairport + '', function(data) {
    var flightPlanCoordinates = [];
    var bounds = new google.maps.LatLngBounds();
    $.each(data, function(key, value) {
      flightPlanCoordinates.push(new google.maps.LatLng(data[key].latitude, data[key].longitude));
      bounds.extend(flightPlanCoordinates[flightPlanCoordinates.length - 1]);
    });
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#fca000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    map.fitBounds(bounds);
    flightPath.setMap(map);
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 95%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

相关文章：