javascript - 谷歌地图没有在地图中获得路径中心

Question

我现在得到的地图我正在尝试获取地图的中心，但不是在两个标记之间获取单一路径，我目前在地图末尾得到了两条半路径。我完全被卡住了。

我已经提供了图像现在的样子

。帮帮我

<html>
  <head>
    <title>Navigation functions (heading)</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
   <style>
   html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-canvas, #map_canvas {
  height: 50%;
  width:50%;
}

@media print {
  html, body {
    height: auto;
  }

  #map-canvas, #map_canvas {
    height: 650px;
  }
}
   </style>
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
   <script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>
    <script>
var poly;
var geodesicPoly;
var marker1;
var marker2;

function initialize() {
 if(jQuery('#address1').val()!=''){
            var position = jQuery('#address1').val().split(",");
            var g_lat1= parseFloat(position[0]);
            var g_long1=parseFloat(position[1]);
    }
    else{
        g_lat1=geoip_latitude();
        g_long1=geoip_longitude();
    }
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(g_lat1,g_long1),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(
      document.getElementById('info'));
    if(jQuery('#address1').val()!=''){
            var position = jQuery('#address1').val().split(",");
            var lat1= parseFloat(position[0]);
            var long1=parseFloat(position[1]);
            marker1 = new google.maps.Marker({
                map: map,
                draggable: false,
                position: new google.maps.LatLng(lat1.toFixed(2),long1.toFixed(2))
            });
        }else{
           marker1 = new google.maps.Marker({
                map: map,
                draggable: false,
                position: new google.maps.LatLng(geoip_latitude(),geoip_longitude())
            });
        }
        if(jQuery('#address1').val()!=''){
            var iw = new google.maps.InfoWindow({
                content: '<div style="overflow:hidden">'+jQuery('#content1').val()+'</div>'
            });
        }else{
            var iw = new google.maps.InfoWindow({
                content: '<div style="overflow:hidden">'+geoip_city()+','+geoip_region_name()+','+geoip_country_name()+'</div>'
            });
        }
        google.maps.event.addListener(marker1, "click", function (e) { iw.open(map, this); });
        if(jQuery('#address2').val()!=''){
            var position1 = jQuery('#address2').val().split(",");
            var lat2= parseFloat(position1[0]);
            var long2= parseFloat(position1[1]);
            marker2 = new google.maps.Marker({
                map: map,
                draggable: false,
                position: new google.maps.LatLng(lat2.toFixed(2),long2.toFixed(2))
            });
        }else{
            marker2=''; 
        }
        var iw1 = new google.maps.InfoWindow({
            content: '<div style="overflow:hidden">'+jQuery('#content2').val()+'</div>'
        });
        google.maps.event.addListener(marker2, "click", function (e) { iw1.open(map, this); });
        var bounds = new google.maps.LatLngBounds(marker1.getPosition(),
        marker2.getPosition());

        map.fitBounds(bounds);
        zoomChangeBoundsListener = 
        google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
            if (this.getZoom()){
                this.setCenter(this.getCenter());
                this.setZoom(2);

            }

        });
    setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 1000);


  var geodesicOptions = {
    strokeColor: '#CC0099',
    strokeOpacity: 1.0,
    strokeWeight: 3,
    geodesic: true,
    map: map
  };
  geodesicPoly = new google.maps.Polyline(geodesicOptions);

  update();

}

function update() {
  var path = [marker1.getPosition(), marker2.getPosition()];
  //poly.setPath(path);
  geodesicPoly.setPath(path);
  var heading = google.maps.geometry.spherical.computeHeading(path[0],
      path[1]);
}
google.maps.event.addDomListener(window, 'load', initialize);

  var jq = jQuery.noConflict();
    jq(function() {

        var currenttimestamp = jq.now();
        var currenttimestamp_1 = currenttimestamp+1;
        jq("#wg_destination").keyup(function() 
        { 
            var inputSearch = jq(this).val();
            if(inputSearch!='')
            {
                jq.ajax({
                    type: 'POST',
                    url: "http://www.wego.com/p/flights/locations/search?locale=en-US&callback=jsonp1361262391038&_="+currenttimestamp_1+"&q="+inputSearch+"&limit=10&timestamp="+currenttimestamp+"&format=jsonp",
                    async: false,
                    cache: false,
                    crossDomain: true,
                    dataType: 'jsonp',
                    error: function( xhr,err ) {
                        console.log( 'Sample of error data:', err );
                        console.log("readyState: "+xhr.readyState+"\nstatus: "+xhr.status+"\nresponseText: "+xhr.responseText);
                    },
                    success: function( data, status ) {
                        var availableTags = [];
                        jq.each(data, function(index, element) {
                            for(var i=0;i<element.length;i++){
                                availableTags.push(element[i].fn);
                            }
                        });
                        jq('#wg_destination').autocomplete({
                            source: availableTags
                        }); 
                    }

                });

            }
        });
        jq("#wg_origin").keyup(function() 
        { 
            var inputSearch = jq(this).val();
            if(inputSearch!='')
            {
                jq.ajax({
                    type: 'POST',
                    url: "http://www.wego.com/p/flights/locations/search?locale=en-US&callback=jsonp1361262391038&_="+currenttimestamp_1+"&q="+inputSearch+"&limit=10&timestamp="+currenttimestamp+"&format=jsonp",
                    async: false,
                    cache: false,
                    crossDomain: true,
                    dataType: 'jsonp',
                    error: function( xhr,err ) {
                        console.log( 'Sample of error data:', err );
                        console.log("readyState: "+xhr.readyState+"\nstatus: "+xhr.status+"\nresponseText: "+xhr.responseText);
                    },
                    success: function( data, status ) {
                        var availableTags = [];
                        jq.each(data, function(index, element) {
                            for(var i=0;i<element.length;i++){
                                availableTags.push(element[i].fn);
                            }
                        });
                        jq('#wg_origin').autocomplete({
                            source: availableTags
                        }); 
                    }

                });

            }
        });
    });
    function fncheckfrm(){
        var geocoder = new google.maps.Geocoder();
        var address1 = jq('#wg_origin').val();
        var address2 = jq('#wg_destination').val();
        if(address1!='' && address2!=''){
            geocoder.geocode( { 'address': address1}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    jq('#address1').val(latitude+','+longitude);
                    jq('#content1').val(results[0].formatted_address);
                } 
            });
            geocoder.geocode( { 'address': address2}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    jq('#address2').val(latitude+','+longitude);
                    jq('#content2').val(results[0].formatted_address);
                } 
            });
        }
        setTimeout(initialize,1000); 
        }
    </script>
  </head>
  <body>
    <div id="map-canvas" style="width:80%;height:80%;left:50px"></div>
    <div style="clear:both"></div>
     <input type="hidden" id="address1" value="">
    <input type="hidden" id="address2" value="">
    <input type="hidden" id="content1" value="">
    <input type="hidden" id="content2" value="">
    <div class="distance-select search-box-row cf" style="margin-top:10px;">
    <span class="form">
        <label>From dest</label>
        <input type="text" size="13" value="Auckland, New Zealand (AKL)" id="wg_origin" name="wg_origin">   
    </span>
    <span class="check-in">
       <label>Top des</label>
    <input type="text" size="13" value="Delhi (New Delhi), India (DEL)" id="wg_destination" name="wg_destination">   </span>
      <div>
        <input type="button" onclick="fncheckfrm()" va![enter image description here][2]lue="Click">
      </div>
    </div>
  </body>
</html>

score 1 · Accepted Answer

更新这部分

        google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
        if (this.getZoom()){
           // this.setCenter(this.getCenter());
            this.setZoom(4);
            var LatLngList = [new google.maps.LatLng (lat1,long1), new google.maps.LatLng  (lat2,long2)];
            var bounds = new google.maps.LatLngBounds ();
            for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
            bounds.extend (LatLngList[i]);
            }
            map.fitBounds (bounds);

        }

javascript - 谷歌地图没有在地图中获得路径中心

1 回答 1

Related

Reference