gpt4 book ai didi

json - 谷歌使用存储的结果 map 路线

转载 作者:行者123 更新时间:2023-12-04 16:48:20 28 4
gpt4 key购买 nike

我正在尝试组合一个应用程序,我可以在其中查询谷歌路线服务,存储结果以建立缓存,然后根据需要呈现路线。

我可以取回方向数据并将其存储在数据库中就好了,这一切都很好,现在当我在 map 上渲染方向时,我的 javascript 真的让我失望。 (strData) 是一个字符串,包含来自数据库的 json 格式的方向。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="map.aspx.cs" Inherits="panto" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setDirections(<%= strData %>);
}

function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
alert(response);
directionsDisplay.setDirections(response);
}
});
}
</script>
</head>
<body onload="initialize()">
<div>

</div>
<div id="map_canvas" style="top:30px;"></div>
</body>
</html>

firefox 错误控制台报错
Error: g[Xb] is not a function
Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/5/11/main.js
Line: 109

任何帮助将不胜感激

最佳答案

要呈现来自 Google Web 服务(与来自 JavaScript API)的路线结果,我们可以在结果中使用编码路径。

  • 添加几何库来解码路径:
    http://maps.google.com/maps/api/js?libraries=geometry&sensor=false
  • 解码路径并渲染折线
    var rideCoordinates = google.maps.geometry.encoding.decodePath(results.routes[0].overview_polyline.points);       
    var ridePath = new google.maps.Polyline({
    map: map_object,
    path: rideCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 3
    });
  • 设置 map 的边界
    var ne = new google.maps.LatLng(results.routes[0].bounds.northeast.lat, route.bounds.northeast.lng);
    var sw = new google.maps.LatLng(results.routes[0].bounds.southwest.lat, route.bounds.southwest.lng);
    map_object.fitBounds(new google.maps.LatLngBounds(sw, ne));

  • HTH

    关于json - 谷歌使用存储的结果 map 路线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6862797/

    28 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com