GoogleMap在网页上

时间:2015-10-08 13:55:53

标签: javascript google-maps

我将以下代码用于我的网页,但我希望地图在this example中显示边框。
我怎么能搞清楚?

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script language="javascript" type="text/javascript">

var map;
var geocoder;
function InitializeMap() {

    var latlng = new google.maps.LatLng(39.646859, 27.883121);
    var myOptions =
    {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
}

function FindLocation(whichone) {
    geocoder = new google.maps.Geocoder();
    InitializeMap();

    var control1 = document.getElementById('<%= DDL_Ilce.ClientID %>');
    var selectedvalue1 = control1.options[control1.selectedIndex].text;
    var control2 = document.getElementById('<%= DDL_Mahalle.ClientID %>');
    var selectedvalue2 = control2.options[control2.selectedIndex].text;
    if (whichone == 1) {
        var address = " Balıkesir" ;
    }
    else
    {
        var address = selectedvalue2 + " Balıkesir" ;
    }
    alert(address);
    geocoder.geocode({ 'address': address, 'region':'Turkey' }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.fitBounds(results[0].geometry.bounds);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location

            });
        }
        else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

}

window.onload = InitializeMap;

</script>

1 个答案:

答案 0 :(得分:0)

添加Polyline方法。举个例子,在InitializeMap()函数中放置这样的东西:

var flightPlanCoordinates = [
                                   {lat: 39.646859, lng: 27.883121},
                                   {lat: 40.646859, lng: 28.883121},
                                   {lat: 42.646859, lng: 30.883121},
                                   {lat: 43.646859, lng: 32.883121},
                                   {lat: 39.646859, lng: 27.883121}
                                 ];
      var flightPath = new google.maps.Polyline({
                              path: flightPlanCoordinates,
                              geodesic: true,
                              strokeColor: '#FF0000',
                              strokeOpacity: 1.0,
                              strokeWeight: 2
                       });

     flightPath.setMap(map);

这样你的函数现在看起来像这样:

function InitializeMap(){
      var latlng = new google.maps.LatLng(39.646859, 27.883121); 
      var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true }; 
      map = new google.maps.Map(document.getElementById("map"), myOptions);

      var flightPlanCoordinates = [
                                   {lat: 39.646859, lng: 27.883121},
                                   {lat: 40.646859, lng: 28.883121},
                                   {lat: 42.646859, lng: 30.883121},
                                   {lat: 43.646859, lng: 32.883121},
                                   {lat: 39.646859, lng: 27.883121}
                                 ];
      var flightPath = new google.maps.Polyline({
                              path: flightPlanCoordinates,
                              geodesic: true,
                              strokeColor: '#FF0000',
                              strokeOpacity: 1.0,
                              strokeWeight: 2
                       });

     flightPath.setMap(map);
} 

您可以在此处详细了解: documentation