我如何在谷歌地图画一条路径？ [英] how i draw a path in google map?
本文介绍了我如何在谷歌地图画一条路径？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<%@ Page Title="Login" Language="C#" MasterPageFile="~/MapMasterPage.master" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
.auto-style5 {
height: 201px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" runat="server" contentplaceholderid="ContentPlaceHolder1">
<table class="auto-style1">
<tr>
<td class="auto-style2" style="text-align: center; font-size: 65px; font-family: Algerian; background-color: #808080;">COLOMBO DIRECTION MAP</td>
</tr>
<tr>
<td class="auto-style3">
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapProp = {
center: new google.maps.LatLng(6.927079, 79.861243),
zoom: 11,
mapTypeIds: [google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE]
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('googleMap'));
var control = document.getElementById('control');
control.style.display = 'block';
}
function calcRoute() {
//var start = Label1 + Label2;;
//var end = Label3 + Label4;
var start = document.getElementById('TextBox1').value;
var end = document.getElementById('TextBox2').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
//function calculate() {
// var startLoc = TextBox1.Text;
// TextBox2 = startLoc;
//}
</script>
</head>
<body>
<div id="googleMap" style="width:100%;height:400px;"></div>
</body>
</html>
</td>
</tr>
<tr>
<td class="auto-style5" style="background-color: #996633; vertical-align: top; text-align: center;">
<br />
Map Type <asp:DropDownList ID="DropDownList1" runat="server" Height="22px" Width="128px">
</asp:DropDownList>
<br />
<br />
Source
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
Lattitude =
<asp:Label ID="Label1" runat="server" Text="Lat1"></asp:Label>
Longitude =
<asp:Label ID="Label2" runat="server" Text="LngT1"></asp:Label>
<br />
<br />
Destination
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
Lattitude =
<asp:Label ID="Label3" runat="server" Text="Lat2"></asp:Label>
Longitude =
<asp:Label ID="Label4" runat="server" Text="LngT2"></asp:Label>
<br />
<br />
<br />
<asp:Button ID="Button1" OnServerClick="calculate();return false;" runat="server" Text="Button" OnClick="Button1_Click" Width="120px" />
<br />
<br />
</td>
</tr>
<tr>
<td style="background-color: #808080"> </td>
</tr>
</table>
</asp:Content>
推荐答案
此代码项目文章演示了如何执行此操作使用Google Maps JavaScript API绘制路径 [ ^ ]
This code project article demonstrates how to do this Plot Path using Google Maps JavaScript API[^]
这篇关于我如何在谷歌地图画一条路径？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
