使用方向 API 在多个预定义标记之间绘制折线。

huangapple go评论93阅读模式
英文:

draw polylines between multiple predefined markers using direction api

问题

这是我的URL

https://maps.googleapis.com/maps/api/directions/json?key={我的API密钥}&units=metric&origin=27.671690422260465,84.40326005320367&destination=27.6764151316667,84.41106864336271&mode=driving&waypoints=27.671690422260465,84.403260053203670|27.677023212852635,84.406927312726400|27.676814185326755,84.409158910582240|27.677004210366814,84.410972083840110|27.676415131666700,84.411068643362710

这是我的绘制折线的代码

void drawPolyLines() async {
    // getAddressFromLatLng();
    String origin = "";
    String url = "";
    http.Response? response;
    var ltLn = latLag
        .toString()
        .replaceAll(",", "|")
        .replaceAll(":", ",")
        .replaceAll("[", "")
        .replaceAll("]", "")
        .replaceAll(" ", "");
    List<Placemark> placemarks = [];
    for (int i = 0; i < latLen.length; i++) {
        placemarks = await placemarkFromCoordinates(
            latLen[i].latitude, latLen[i].longitude);
    }

    log("second for vhitra");
    url =
        "https://maps.googleapis.com/maps/api/directions/json?key=${Keys.googleApiKey}&units=metric&origin=${latLen.first.latitude},${latLen.first.longitude}&destination=${latLen.last.latitude},${latLen.last.longitude}&mode=driving&waypoints=$ltLn";
    
    response = await http.post(Uri.parse(url));
    pResponse = pRes.polylineResponseFromJson(response.body);
    log("This is URL >>>>>>>>>>>>>>>> $url");
    log("This is response ${response.body}");
    try {
        for (int i = 0; i < pResponse.routes![0].legs![0].steps!.length; i++) {
            polylin.add(Polyline(
                polylineId: PolylineId(
                    pResponse.routes![0].legs![0].steps![i].polyline!.points!),
                points: [
                    LatLng(
                        pResponse.routes![0].legs![0].steps![i].startLocation!.lat!,
                        pResponse.routes![0].legs![0].steps![i].startLocation!.lng!),
                    LatLng(
                        pResponse.routes![0].legs![0].steps![i].endLocation!.lat!,
                        pResponse.routes![0].legs![0].steps![i].endLocation!.lng!),
                ],
                width: 3,
                color: Colors.red));
        }
    } catch (e) {
        rethrow;
    }
}

在我的API调用中,当我使用wayPoints时,会绘制起点和终点之间的折线,但留下其他标记,如图所示。但我希望按照标记的顺序连接折线,就像在Google地图中显示的一样,但我无法实现这一点,需要一些帮助。

英文:

This is my url

https://maps.googleapis.com/maps/api/directions/json?key={My api key}&amp;units=metric&amp;origin=27.671690422260465,84.40326005320367&amp;destination=27.6764151316667,84.41106864336271&amp;mode=driving&amp;waypoints=27.671690422260465,84.403260053203670|27.677023212852635,84.406927312726400|27.676814185326755,84.409158910582240|27.677004210366814,84.410972083840110|27.676415131666700,84.411068643362710

This is my code to draw polylines

 void drawPolyLines() async {
// getAddressFromLatLng();
String origin = &quot;&quot;;
String url = &quot;&quot;;
http.Response? response;
var ltLn = latLag
.toString()
.replaceAll(&quot;,&quot;, &quot;|&quot;)
.replaceAll(&quot;:&quot;, &quot;,&quot;)
.replaceAll(&quot;[&quot;, &quot;&quot;)
.replaceAll(&quot;]&quot;, &quot;&quot;)
.replaceAll(&quot; &quot;, &quot;&quot;);
List&lt;Placemark&gt; placemarks = [];
for (int i = 0; i &lt; latLen.length; i++) {
placemarks = await placemarkFromCoordinates(
latLen[i].latitude, latLen[i].longitude);
}
log(&quot;second for vhitra&quot;);
url =
&quot;https://maps.googleapis.com/maps/api/directions/json?key=${Keys.googleApiKey}&amp;units=metric&amp;origin=${latLen.first.latitude},${latLen.first.longitude}&amp;destination=${latLen.last.latitude},${latLen.last.longitude}&amp;mode=driving&amp;waypoints=$ltLn}&quot;;
response = await http.post(Uri.parse(url));
pResponse = pRes.polylineResponseFromJson(response.body);
log(&quot;This is url&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt; $url&quot;);
log(&quot;THis is response ${response.body}&quot;);
try {
//PolylinePoints polylinePoints = PolylinePoints();
for (int i = 0; i &lt; pResponse.routes![0].legs![0].steps!.length; i++) {
polylin.add(Polyline(
polylineId: PolylineId(
pResponse.routes![0].legs![0].steps![i].polyline!.points!),
points: [
LatLng(
pResponse.routes![0].legs![0].steps![i].startLocation!.lat!,
pResponse.routes![0].legs![0].steps![i].startLocation!.lng!),
LatLng(pResponse.routes![0].legs![0].steps![i].endLocation!.lat!,
pResponse.routes![0].legs![0].steps![i].endLocation!.lng!),
],
width: 3,
color: Colors.red));
}
} catch (e) {
rethrow;
}
//}
//log(&quot;This is map response ${response.body}&quot;);
}

in my api call when i use wayPoints then a polyline is drawn between start and end point leaving other markers like this使用方向 API 在多个预定义标记之间绘制折线。

but i want to connect the polylines which is shown in google map in the same order which markers are shown but i am unable to do so need some help in here.

答案1

得分: 0

这样做我找到了解决方案,我将其发布出来,以便可能对其他人有所帮助。

    void drawPolyLines() async {
        http.Response? response;
        var ltLn = latLag
            .toString()
            .replaceAll(",", "|")
            .replaceAll(":", ",")
            .replaceAll("[", "")
            .replaceAll("]", "")
            .replaceAll(" ", "");

        String origin = "${latLen.first.latitude},${latLen.first.longitude}";
        String destination = "${latLen.last.latitude},${latLen.last.longitude}";
        String url =
            "https://maps.googleapis.com/maps/api/directions/json?key=${Keys.googleApiKey}&origin=$origin&destination=$destination&mode=driving&waypoints=$ltLn";

        response = await http.post(Uri.parse(url));
        pResponse = pRes.polylineResponseFromJson(response.body);
        try {
          PolylineId id = PolylineId(DateTime.now().microsecond.toString());
          for (int i = 0; i < (pResponse.routes![0].legs ?? []).length; i++) {
            for (int j = 0; j < pResponse.routes![0].legs![i].steps!.length; j++) {
              final Polyline polyline = Polyline(
                polylineId: PolylineId(
                    pResponse.routes![0].legs![i].steps![j].polyline!.points!),
                width: 2,
                color: Colors.blue,
                startCap: Cap.roundCap,
                endCap: Cap.buttCap,
                points: [
                  LatLng(
                      pResponse.routes?[0].legs?[i].steps?[j].startLocation?.lat ??
                          0.0,
                      pResponse.routes?[0].legs?[i].steps?[j].startLocation?.lng ??
                          0.0),
                  LatLng(
                      pResponse.routes?[0].legs?[i].steps?[j].endLocation?.lat ??
                          0.0,
                      pResponse.routes?[0].legs?[i].steps?[j].endLocation?.lng ??
                          0.0),
                ],
              );
              polylin.add(polyline);
              polyLines[id] = polyline;
              update();
            }
            update();
          }
        } catch (e) {
          rethrow;
        }
      }
英文:

Do it like this i found the solution i am posting it so that it might may come in handy to others.

void drawPolyLines() async {
http.Response? response;
var ltLn = latLag
.toString()
.replaceAll(&quot;,&quot;, &quot;|&quot;)
.replaceAll(&quot;:&quot;, &quot;,&quot;)
.replaceAll(&quot;[&quot;, &quot;&quot;)
.replaceAll(&quot;]&quot;, &quot;&quot;)
.replaceAll(&quot; &quot;, &quot;&quot;);
String origin = &quot;${latLen.first.latitude},${latLen.first.longitude}&quot;;
String destination = &quot;${latLen.last.latitude},${latLen.last.longitude}&quot;;
String url =
&quot;https://maps.googleapis.com/maps/api/directions/json?key=${Keys.googleApiKey}&amp;origin=$origin&amp;destination=$destination&amp;mode=driving&amp;waypoints=$ltLn&quot;;
response = await http.post(Uri.parse(url));
pResponse = pRes.polylineResponseFromJson(response.body);
try {
PolylineId id = PolylineId(DateTime.now().microsecond.toString());
for (int i = 0; i &lt; (pResponse.routes![0].legs ?? []).length; i++) {
for (int j = 0; j &lt; pResponse.routes![0].legs![i].steps!.length; j++) {
final Polyline polyline = Polyline(
polylineId: PolylineId(
pResponse.routes![0].legs![i].steps![j].polyline!.points!),
width: 2,
color: Colors.blue,
startCap: Cap.roundCap,
endCap: Cap.buttCap,
points: [
LatLng(
pResponse.routes?[0].legs?[i].steps?[j].startLocation?.lat ??
0.0,
pResponse.routes?[0].legs?[i].steps?[j].startLocation?.lng ??
0.0),
LatLng(
pResponse.routes?[0].legs?[i].steps?[j].endLocation?.lat ??
0.0,
pResponse.routes?[0].legs?[i].steps?[j].endLocation?.lng ??
0.0),
],
);
polylin.add(polyline);
polyLines[id] = polyline;
update();
}
update();
}
} catch (e) {
rethrow;
}
}

huangapple
  • 本文由 发表于 2023年2月19日 12:26:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/75497984.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定