Google地图未按预期显示

时间:2013-08-22 09:40:27

标签: javascript asp.net google-maps google-maps-api-3

我想创建谷歌地图。现在它显示在第一个屏幕截图中。 但我希望它显示在第二个屏幕截图中。有没有办法完成任务?

我正在使用以下Javascript代码来显示谷歌地图:

<script type="text/javascript">
    var map;
    var infowindow;
    var url = document.URL;
    var id_check = /[?&]park=([^&]+)/i;
    var match1 = id_check.exec(url);
    if (match1 != null) {
        final_id = match1[1];
    } else {
        final_id = "";
    }
    final_id = final_id.replace(/%/g, " ");
    final_id = final_id.replace(/20/g, "");
    var latlong = /[?&]latlong=([^&]+)/i;
    var latlongmatch = latlong.exec(url);
    if (latlongmatch != null) {
        latlong = latlongmatch[1];
    }
    else {
        latlong = "";
    }
    latlong = latlong.replace(/%/g, " ");
    latlong = latlong.replace(/20/g, "");
   // alert(final_id);
    function initialize() {
        var split = latlong.split(',');
        var lat = split[0];
        var long = split[1];
        var loca = new google.maps.LatLng(lat,long);
        map = new google.maps.Map(document.getElementById('map'), {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            travelmode: google.maps.TravelMode.BICYCLING,
            center: loca,
            zoom: 14
        });

        var request = {
            location: loca,
            radius: 10000,
            //name: 'State Game Lands',
            //keyword: 'State Game Lands',
            //type: ['State Game Lands']


        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);
    }

    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < 2; i++) {
                alert(results[i].geometry.location.formatted_address);
                createMarker(results[i]);
            }
        }
    }

    function createMarker(place) {
        var split = latlong.split(',');
        var lat = split[0];
        var long = split[1];
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
            map: map,
            //position: place.geometry.location

            position: new google.maps.LatLng(lat,long)
        });

        google.maps.event.addListener(marker, 'mouseover', function () {
            infowindow.setContent(final_id);
            infowindow.open(map, this);
            //marker.openInfoWindowHtml(final_id);
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

第一个截图(此时正在进行diplaying)

Google Map without appear display

第二个屏幕截图(应显示为此内容)

Google map with display view

2 个答案:

答案 0 :(得分:2)

如果您希望它显示为卫星,只需更改以下行:

mapTypeId: google.maps.MapTypeId.ROADMAP,

mapTypeId: google.maps.MapTypeId.SATELLITE,

答案 1 :(得分:0)

设置缩放级别和maptype

                    var mapOptions = {
                    center: new google.maps.LatLng(43.653226, -79.3831843),
                        zoom: 14,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);