隐藏地图的一部分

时间：2015-10-13 08:32:20

标签： javascript html css google-maps-api-3

续在Distance between two locations 

<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">

var directionsDisplay;
var directionsService;
var map;

function initialize() 
{    
    directionsDisplay= new google.maps.DirectionsRenderer();
    directionsService = new google.maps.DirectionsService();

    var mapProp = 
    {
        zoom: 7,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('textDirection'));

}

function showMap()
{
    document.getElementById("googleMap").style.display = 'inline';
    document.getElementById("textDirection").style.display = 'inline';
    var start = document.getElementById('origin').value;
    var end = document.getElementById('destination').value;
    var directionsRequest = 
    {
        origin : start,
        destination : end,
        travelMode : google.maps.TravelMode.DRIVING
    }

    directionsService.route(directionsRequest, function(response, status)
    {
        if(status === google.maps.DirectionsStatus.OK)
        {  
            directionsDisplay.setDirections(response);          
        }
        else
        {
            window.alert('Cannot'); 
        }
    });
}

function resetMap()
{
    document.getElementById("origin").value = '';
    document.getElementById("destination").value = '';
    document.getElementById("googleMap").style.display = 'none';
    document.getElementById("textDirection").style.display = 'none';
}  
</script>

<style>
#textDirection{
width: 300px;
height: 60%;
float: right;
overflow-y: auto;
margin-top: 1%;
margin-right: 29%;
}

#googleMap{
width : 50%;
height : 60%;
top: 5%;
position : absolute;
margin-left: 5px; 
}
</style>
</head>

<body onload="initialize()">
<form action="showmap1.php" method="post">
From: <input type="text" name="origin" id="origin" size="30" />&nbsp;
To:<input type="text" name="destination" id="destination" size="30" />
<input type="button" value="Search" onclick="showMap()" />
<input type="button" value="Reset" onclick="resetMap()" /><br />
<div id="googleMap"></div>
<div id="textDirection"></div>
</form>
</body>
</html>

从上面的代码中，我有以下问题：
（1） JavaScript
    当我运行上面的代码时，我得到如下图所示的输出：

enter image description here

灰色部分是显示的地图。我想在第一次运行页面时隐藏它。我该如何修改呢？

（2） JavaScript
    在我搜索到正确的结果后，现在我尝试搜索空白目的地。它显示如下图像：

enter image description here

但是，之前的地图和路线会与警报一起显示。我的预期输出仅显示警告消息＆＃34;不能＆＃34;没有地图和路线。我该如何修改呢？

（3） CSS
当我将网页缩放到120％时，我的输出如下图所示： enter image description here
天啊，我无法看到路线。如果我将网页变得越来越大，那就更糟了。为什么以及如何在css中修改它？

2 个答案:

答案 0 :(得分：2)

<强>（1）

你应该把

POLLRDBAND

进入#include <stdio.h> #include <assert.h> #include <mach/mach.h> #include <sys/types.h> #include <sys/event.h> #include <sys/time.h> #include <sys/select.h> #include <poll.h> int main(void) { kern_return_t kr; int rc; int kq=kqueue(); assert(kq!=-1); mach_port_name_t port_set; kr=mach_port_allocate(mach_task_self(),MACH_PORT_RIGHT_PORT_SET,&port_set); assert(kr==KERN_SUCCESS); { const struct kevent64_s events[]={ { .flags=EV_ADD|EV_ENABLE, .filter=EVFILT_MACHPORT, .ident=port_set, }, }; rc=kevent64(kq,events,sizeof events/sizeof events[0],NULL,0,0,NULL); assert(rc==0); } /* Events available? */ { const struct timespec NO_TIMEOUT={0,0}; struct kevent64_s event; rc=kevent64(kq,NULL,0,&event,1,0,&NO_TIMEOUT); printf("kevent64: %d\n",rc); } /* Test readability with select. */ { const struct timeval NO_TIMEOUT={0,0}; fd_set rd; FD_ZERO(&rd); FD_SET(kq,&rd); rc=select(kq+1,&rd,NULL,NULL,&NO_TIMEOUT); printf("select: %d\n",rc); } /* Test readibility with poll. */ { struct pollfd fds[]={ { .fd=kq, .events=POLLIN, }, }; rc=poll(fds,sizeof fds/sizeof fds[0],0); printf("poll: %d (revents: %d)\n",rc,fds[0].revents); } /* Events available? */ { const struct timespec NO_TIMEOUT={0,0}; struct kevent64_s event; rc=kevent64(kq,NULL,0,&event,1,0,&NO_TIMEOUT); printf("kevent64: %d\n",rc); } } 函数。地图不会在第一次加载页面时显示。它仅在您按var mapProp = { zoom: 7, center: {lat: 62, lng: -110.0}, mapTypeId : google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("googleMap"), mapProp); directionsDisplay.setMap(map); 按钮时显示。

<强>（2）

如果显示showMap()提醒，请隐藏地图和路线，如下所示：

Search

<强>（3）

如果您Cannot，则不应修复if(status === google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } else { document.getElementById("googleMap").style.display = 'none'; document.getElementById("textDirection").style.display = 'none'; window.alert('Cannot'); } 元素。如果元素的float:right大于屏幕，则会破坏您的布局。我不擅长width，您可以尝试以下代码。希望这有帮助^^ 

width

<强>更新

要隐藏地图并仅在需要时显示，请使用事件：

CSS

我更新了我的代码，请检查一下。我们只需要将地图缩放设置为1并立即增加：

#textDirection{
    width: 40%;
    height: 60%;
    float: right;
    overflow-y: auto;
    margin-top: 1%;
}

#googleMap{
    width : 50%;
    height : 60%;
    top: 5%;
    position : absolute;
    margin-left: 5px; 
}

Here is updated answer

答案 1 :(得分：1)

如果您要使用google maps API，可以使用以下功能：注意：您必须在脚本源中添加＆amp; libraries = geometry

在Google Maps - How to get the distance between two point in metre?

中找到 
var p1 = new google.maps.LatLng(45.463688, 9.18814);
var p2 = new google.maps.LatLng(46.0438317, 9.75936230000002);

alert(calcDistance(p1, p2));

//calculates distance between two points in km's
function calcDistance(p1, p2){
  return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
}

}

你也可以使用

   var location1 = new google.maps.LatLng(42.3584308, -71.0597732);
      var location2 = new google.maps.LatLng(42.348805455204214, -71.07485794349975);

      var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      directionsService = new google.maps.DirectionsService();
      directionsDisplay = new google.maps.DirectionsRenderer(
      {
      suppressMarkers: true,
      suppressInfoWindows: true
      });
      directionsDisplay.setMap(map);
      var request = {
      origin: location1, 
      destination:location2,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) 
      {
      if (status == google.maps.DirectionsStatus.OK) 
      {
      directionsDisplay.setDirections(response);
      //alert("the distance: " + response.routes[0].legs[0].distance.text);
      distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
      //distance += "<br/>The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
      document.getElementById("distance").innerHTML = distance;
      }
      });

      // show a line between the two points
      var line = new google.maps.Polyline({
      map: map, 
      path: [location1, location2],
      strokeWeight: 7,
      strokeOpacity: 0.8,
      strokeColor: "#FFAA00"
      });
      }

      google.maps.event.addDomListener(window, 'load', initialize);

小提琴链接http://jsfiddle.net/39KKu/

相关问题
最新问题