如何使用Google Map API在城市之间绘制距离折线

时间:2018-08-09 09:39:54

标签: asp.net google-maps

我遇到的问题是我必须搜索特定的城市,然后搜索的城市应该显示在MAP上,而其他最近的城市应该显示在距离线上。请帮我解决代码。

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxs&libraries=places"></script>

    <script language="javascript" type="text/javascript">
        var map;
        var geocoder;
        function InitializeMap() {
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var myOptions =
            {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true
            };
            map = new google.maps.Map(document.getElementById("map"), myOptions);
        }
        function FindLocaiton(lat, lng, searchedcity, searchedcountry) {
            geocoder = new google.maps.Geocoder();
            InitializeMap();
            var latlng = new google.maps.LatLng(lat, lng);
            map.setCenter(latlng);
            var marker = new google.maps.Marker({
                map: map,
                icon: 'https://maps.google.com/mapfiles/kml/shapes/schools_maps.png',
                position: latlng
            });

            var infowindow = new google.maps.InfoWindow({
                content: 'Location info:Location <br/>Country Name:'+ searchedcountry +'<br/>City: '+searchedcity+''
            });

            google.maps.event.addListener(marker, 'click', function () {
                // Calling the open method of the infoWindow 
                infowindow.open(map, marker);
            });
            return false;
       }
        window.onload = InitializeMap;

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table width="100%">
            <tr>
                <td>
                    <asp:TextBox ID="txtInputArea" runat="server" />
                </td>
                <td><asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Search" /></td>
            </tr>
            <tr><td colspan ="2">
                <div id ="map" style="height: 253px" ></div></td></tr>
        </table>
    </form>
</body>
</html>

此外,我是否需要在末端创建城市地图,还是应该从Google Map API获取给定距离的附近城市?

谢谢!

0 个答案:

没有答案