在单个wordpress模板页面中插入html-js

时间:2015-07-11 06:10:18

标签: javascript php html wordpress

嗨,我是网络开发的新手,我正在使用word press主题开发一个网站,但是我已经制作了一个html / js代码,我希望在其中一个页面中插入一个全宽度模板。 我的html / js看起来像这样

        <!DOCTYPE html>
        <html>
        <head>

        <title>Google Maps API v3 Example: Distance Matrix</title>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
       <style>
       html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #wrapper {
      width: 100%;
      height: 100%;
      }
      #map-canvas {
        height: 100%;
        width: 100%;
        position: relative;
        z-index: -1;
      }      
      #outputDiv {
        font-size: 11px;
      }
      table { background-color: #828282; border-collapse: collapse; 
      left: 75px;
      right: 0;
      bottom: 0;
      top: 50px;
      position: fixed;
      float: left;
      z-index: 0;
      opacity: 1;
      }
      table,th {border: 4px solid #000; 
      }
      table,td { font-family: Roboto; font-size: 14px; font-weight: 300;
      }
      p {display: inline;}
      #span1 { background-color: #828282; width: 140px; float: left; height: 100%}
      #span2 { background-color: #828282; width: 50px; float: right;height: 100% }
    </style>


    <script>
      var map;      
    var geocoder;      
    var bounds = new google.maps.LatLngBounds();      
    var markersArray = [];
      var origin1 = '';
      var destinationA = '';      
    var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';     
    var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';      
function initialize() {
       var bluestylemap = [
    {
        "featureType": "all",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "saturation": 36
            },
            {
                "color": "#000000"
            },
            {
                "lightness": 40
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#000000"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            },
            {
                "weight": 1.2
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 21
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#2b2b2b"
            },
            {
                "lightness": 17
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#040404"
            },
            {
                "lightness": 29
            },
            {
                "weight": 0.2
            }
        ]
    },
    {
        "featureType": "road.highway.controlled_access",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "hue": "#ff0000"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 18
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "hue": "#ff0000"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 19
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#0c526e"
            },
            {
                "lightness": 17
            }
        ]
    }
];
        var mapOptions = {
          center: new google.maps.LatLng(19.105934, 72.849618),
          zoom: 10,
           mapTypeControlOptions: {
          mapTypeId: [google.maps.MapTypeId.ROADMAP , 'mumbaimap']
        }
      };       
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var styledMapOptions = {
        name: 'Mumbai Map'
        };
        var mumbaiMapType = new google.maps.StyledMapType(
        bluestylemap, styledMapOptions);
        map.mapTypes.set('mumbaimap', mumbaiMapType);
        map.setMapTypeId('mumbaimap');    
        var fromText = document.getElementById('FAdd');
        var options = {
        componentRestrictions: {country: 'in'}
        };
        var fromAuto = new google.maps.places.Autocomplete(fromText, options);
        fromAuto.bindTo('bound', map);
        var toText = document.getElementById('TAdd');
        var toAuto = new google.maps.places.Autocomplete(toText, options);
        toAuto.bindTo('bound', map);
        geocoder = new google.maps.Geocoder();
  }
        function calculateDistances() {
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix(
          {
            origins: [document.getElementById("FAdd").value],
            destinations: [document.getElementById("TAdd").value],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
          }, callback);
      }
        function callback(response, status) {
        if (status != google.maps.DistanceMatrixStatus.OK) {
          alert('Error was: ' + status);
        } else {
          var origins = response.originAddresses;
          var destinations = response.destinationAddresses;
          var outputDiv = document.getElementById('outputDiv');
          var amt_to_pay = document.getElementById('amt_to_pay');
          var totalfare = document.getElementById('totalfare');
          var auto_fare = document.getElementById('auto_fare');
          var taxi_fare = document.getElementById('taxi_fare');
          var auto_save = document.getElementById('auto_save');
          var taxi_save = document.getElementById('taxi_save');   
          outputDiv.innerHTML = '';
          deleteOverlays();
          for (var i = 0; i < origins.length; i++) {
            var results = response.rows[i].elements;
            addMarker(origins[i], false);
            for (var j = 0; j < results.length; j++) {
              addMarker(destinations[j], true);
            outputDiv.innerHTML += results[j].distance.value  + '<br>'; 
          var totalmts = document.getElementById('outputDiv').innerHTML ;
          var totalkms = Math.round(parseInt(totalmts) / 1000);
          var totalamt = totalkms * 10;
          var totalautofare = totalkms * 10;
          var totaltaxifare = Math.round(totalkms * 12.4);
          var autosavings =  Math.round(totalautofare - totalamt);
          var taxisavings =  Math.round(totaltaxifare - totalamt);
                amt_to_pay.innerHTML = totalkms;
                totalfare.innerHTML = totalamt;
                auto_fare.innerHTML = totalautofare;
                taxi_fare.innerHTML = totaltaxifare;
                auto_save.innerHTML = autosavings;
                taxi_save.innerHTML = taxisavings;                      
            }
          }
       }
      }
          function addMarker(location, isDestination) {
          var icon;
          if (isDestination) {
          icon = destinationIcon;
          } else {
          icon = originIcon;
          }
          geocoder.geocode({'address': location}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            bounds.extend(results[0].geometry.location);
            map.fitBounds(bounds);
            var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location,
              icon: icon
            });
            markersArray.push(marker);
          } else {
          alert('Geocode was not successful for the following reason: '+ status);
          }
        });
      }
          function deleteOverlays() {
          if (markersArray) {
          for (var i in markersArray) {
            markersArray[i].setMap(null);
          }
          markersArray.length = 0;
        }
      }
google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body onload="initialize()">
<table>
    <thead>
      <tr> 
        <td aling="left" height="50">FARE ESTIMATE
        </td> 
      </tr> 
    </thead>
  <tbody>
      <tr>      
        <td height="30" width="" align="center">
          <input type="text" id="FAdd" size="20" placeholder="Enter Pickup Lcation">  
        </td>
      </tr>
      <tr>
        <td height="30" width="" align="center">
          <input type="text" id="TAdd" size="20" placeholder="Enter Destination Lcation">
        </td>
      </tr>

      <!--just for creating space-->
      <tr>
        <td height="30" ><div id="span1">Distance:</div><div id="span2"><div id="amt_to_pay"></div></div></td>
      </tr>
      <tr>
        <td height="30" ><div id="span1">Fare:</div><div id="span2"><div id="totalfare"></div></div></td>
      </tr>
      <tr>
       <td height="30" ><div id="span1">You Save(Auto)</div><div id="span2"><div id="auto_save"></div></div></td>
      </tr>
      <tr>
        <td height="30" ><div id="span1">You Save(Taxi)</div><div id="span2"><div id="taxi_save"></div></div></td>
      </tr>
      <tr>
        <td height="40" width="" align="center">
          <div id="inputs">
              <p><button type="button" style="color: #000; font-size: 10pt"; onclick="calculateDistances();">Compare Fare</button></p>
          </div>
        </td>
      </tr>
</table>

<div style="display: none;">
<table align = center>  
<tr>        
<td width="30%" align="left">
<h2> Distance (Kms) </h2> <div id="amt_to_pay"></div> 
</td>
<td>
</td>
<td width="30%" align="left" >
<h2> Fare (Rs.) </h2> <div id="totalfare" ></div>
</td>
</tr>
<tr>
<td width="30%" align="left">
<h3> Auto </h3>
</td>
<td>
</td>
<td width="30%" align="left">
<h3> Taxi </h3>
</td>
</tr>
<tr>
<td width="30%" align="left">
<h4> You pay: </h4> 
</td>
<td>
<div id="auto_fare" ></div>
</td>
<td width="30%" align="left">
<h4> You pay: </h4>
</td>
<td align="left">
<div id="taxi_fare"></div>
</td>
</tr>
<tr>
<td width="30%" align="left">
<h4> You save: </h4> 
</td>
<td>
<div id="auto_save" ></div>
</td>
<td width="25%" align="left">
<h4> You save:</h4>
</td>
<td>
<div id="taxi_save" ></div>
</td>
</tr>
</table>
</div>

    <div id="outputDiv" style="display: none;"></div>

  <div id="wrapper">
      <div id="map-canvas"></div>
      <div id="table"></div> 
      </div>
  </body>
</html>     

我的模板页面也是这样的

    <?php

/*
Template Name: Full Width Page
*/



get_header(); ?>

<div class="clear"></div>

</header> <!-- / END HOME SECTION  -->



    <div id="content" class="site-content">

<div class="container">



<div class="content-left-wrap col-md-12">

    <div id="primary" class="content-area">

        <main id="main" class="site-main" role="main">



            <?php while ( have_posts() ) : the_post(); ?>



                <?php get_template_part( 'content', 'page' ); ?>



                <?php

                    // If comments are open or we have at least one comment, load up the comment template

                    if ( comments_open() || '0' != get_comments_number() ) :

                        comments_template();

                    endif;

                ?>



            <?php endwhile; // end of the loop. ?>



        </main><!-- #main -->

    </div><!-- #primary -->

</div><!-- .content-left-wrap -->




</div><!-- .container -->

<?php get_footer(); ?>

我如何合并这些2? 在此先感谢任何帮助和提示将不胜感激

1 个答案:

答案 0 :(得分:0)

从地图文件中删除doctype声明(头部,标题及其结束标记)并使用get_template_part() https://codex.wordpress.org/Function_Reference/get_template_part