wordpress 子主题 google 地图 api google 地方

Question

我有一个网站，我正在尝试创建一个自定义子主题。我有一个在测试服务器上工作的 html 版本的主题，但是当我将 CSS、javascript 拆分出来并将它们放置在自定义子主题中并放置 html 在 post 中。我显示 javascript 正在加载，但页面无法正常工作。看起来 javascript 没有被调用。

我正在尝试获取类似这样的 google 地图，并将地点作为我的着陆页。

https://developers.google.com/maps/documentation/javascript/examples/full/places-autocomplete-hotelsearch

如有任何建议或帮助，我们将不胜感激。

我还在想办法让它发挥作用。

我在 http://104.236.207.225/

设置了测试服务器

我收到以下错误。

留言 : “initMap 不是函数” 姓名 : “无效值错误” 堆 : “错误↵

这里是wordpress中的代码post.

<div id="findhotel">Find hotels in:</div>
<div id="locationField"><input id="autocomplete" type="text" placeholder="Enter a city" /></div>
<div id="controls"><select id="country">
<option value="all">All</option>
<option value="au">Australia</option>
<option value="br">Brazil</option>
<option value="ca">Canada</option>
<option value="fr">France</option>
<option value="de">Germany</option>
<option value="mx">Mexico</option>
<option value="nz">New Zealand</option>
<option value="it">Italy</option>
<option value="za">South Africa</option>
<option value="es">Spain</option>
<option value="pt">Portugal</option>
<option selected="selected" value="us">U.S.A.</option>
<option value="uk">United Kingdom</option>
</select></div>
<div id="map"></div>
<div id="listing"></div>
<div style="display: none;">
<div id="info-content">
<table>
<tbody>
<tr id="iw-url-row" class="iw_table_row">
<td id="iw-icon" class="iw_table_icon"></td>
<td id="iw-url"></td>
</tr>
<tr id="iw-address-row" class="iw_table_row">
<td class="iw_attribute_name">Address:</td>
<td id="iw-address"></td>
</tr>
<tr id="iw-phone-row" class="iw_table_row">
<td class="iw_attribute_name">Telephone:</td>
<td id="iw-phone"></td>
</tr>
<tr id="iw-rating-row" class="iw_table_row">
<td class="iw_attribute_name">Rating:</td>
<td id="iw-rating"></td>
</tr>
<tr id="iw-website-row" class="iw_table_row">
<td class="iw_attribute_name">Website:</td>
<td id="iw-website"></td>
</tr>
</tbody>
</table>
</div>
</div>

hotelloc.js 文件

  // This example uses the autocomplete feature of the Google Places API.
  // It allows the user to find all hotels in a given place, within a given
  // country. It then displays markers for all the hotels returned,
  // with on-click details for each hotel.

  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:
  // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

  var map, places, infoWindow;
  var markers = [];
  var autocomplete;
  var countryRestrict = {'country': 'us'};
  var MARKER_PATH = 'https://maps.gstatic.com/intl/en_us/mapfiles/marker_green';
  var hostnameRegexp = new RegExp('^https?://.+?/');

  var countries = {
    'au': {
      center: {lat: -25.3, lng: 133.8},
      zoom: 4
    },
    'br': {
      center: {lat: -14.2, lng: -51.9},
      zoom: 3
    },
    'ca': {
      center: {lat: 62, lng: -110.0},
      zoom: 3
    },
    'fr': {
      center: {lat: 46.2, lng: 2.2},
      zoom: 5
    },
    'de': {
      center: {lat: 51.2, lng: 10.4},
      zoom: 5
    },
    'mx': {
      center: {lat: 23.6, lng: -102.5},
      zoom: 4
    },
    'nz': {
      center: {lat: -40.9, lng: 174.9},
      zoom: 5
    },
    'it': {
      center: {lat: 41.9, lng: 12.6},
      zoom: 5
    },
    'za': {
      center: {lat: -30.6, lng: 22.9},
      zoom: 5
    },
    'es': {
      center: {lat: 40.5, lng: -3.7},
      zoom: 5
    },
    'pt': {
      center: {lat: 39.4, lng: -8.2},
      zoom: 6
    },
    'us': {
      center: {lat: 37.1, lng: -95.7},
      zoom: 3
    },
    'uk': {
      center: {lat: 54.8, lng: -4.6},
      zoom: 5
    }
  };

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
    zoom: countries['us'].zoom,
      center: countries['us'].center,
      mapTypeControl: false,
      panControl: false,
      scaleControl: false,
      zoomControl: false,
      streetViewControl: false,

    //  center: {lat: -34.397, lng: 150.644},
    zoom: 12
    });
    infoWindow = new google.maps.InfoWindow({
      content: document.getElementById('info-content')
    });


    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        //infoWindow.setContent('Location found.');
        map.setCenter(pos);


        // Create the autocomplete object and associate it with the UI input control.
        // Restrict the search to the default country, and to place type "cities".

    // Create the autocomplete object and associate it with the UI input control.
    // Restrict the search to the default country, and to place type "cities".
        autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */ (
            document.getElementById('autocomplete')), {
          types: ['(cities)'],
          componentRestrictions: countryRestrict
        });  

        places = new google.maps.places.PlacesService(map);

        autocomplete.addListener('place_changed', onPlaceChanged);

                // Add a DOM event listener to react when the user selects a country.
      document.getElementById('country').addEventListener(
        'change', setAutocompleteCountry);


        search();
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  }

  function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn\'t support geolocation.');
  }

  // When the user selects a city, get the place details for the city and
  // zoom the map in on the city.
  function onPlaceChanged() {
    var place = autocomplete.getPlace();

    if (place.geometry) {
      map.panTo(place.geometry.location);
      map.setZoom(12);
      search();
    } else {
      document.getElementById('autocomplete').placeholder = 'Enter a city';
    }

  }



  // Search for hotels in the selected city, within the viewport of the map.
  function search() {
    var search = {
      bounds: map.getBounds(),
      types: ['hotel']
    };
    console.log("search " + search);
    console.log("bounds " + map.getBounds());
    places.nearbySearch(search, function(results, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        clearResults();
        clearMarkers();
        // Create a marker for each hotel found, and
        // assign a letter of the alphabetic to each marker icon.
        for (var i = 0; i < results.length; i++) {
          var markerLetter = String.fromCharCode('A'.charCodeAt(0) + i);
          var markerIcon = MARKER_PATH + markerLetter + '.png';
          // Use marker animation to drop the icons incrementally on the map.
          markers[i] = new google.maps.Marker({
            position: results[i].geometry.location,
            animation: google.maps.Animation.DROP,
            icon: markerIcon
          });
          // If the user clicks a hotel marker, show the details of that hotel
          // in an info window.
          markers[i].placeResult = results[i];
          console.log("call showInfoWindow");
          google.maps.event.addListener(markers[i], 'click', showInfoWindow);
          setTimeout(dropMarker(i), i * 100);
          addResult(results[i], i);
        }
      }
    });
  }

  function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
      if (markers[i]) {
        markers[i].setMap(null);
      }
    }
    markers = [];
  }

  // Set the country restriction based on user input.
  // Also center and zoom the map on the given country.
  function setAutocompleteCountry() {
    var country = document.getElementById('country').value;
    if (country == 'all') {
      autocomplete.setComponentRestrictions([]);
      map.setCenter({lat: 15, lng: 0});
      map.setZoom(2);
    } else {
      autocomplete.setComponentRestrictions({'country': country});
      map.setCenter(countries[country].center);
      map.setZoom(countries[country].zoom);
    }
    clearResults();
    clearMarkers();
  }

  function dropMarker(i) {
    return function() {
      markers[i].setMap(map);
    };
  }

  function addResult(result, i) {
    var results = document.getElementById('results');
    var markerLetter = String.fromCharCode('A'.charCodeAt(0) + i);
    var markerIcon = MARKER_PATH + markerLetter + '.png';

    var tr = document.createElement('tr');
    tr.style.backgroundColor = (i % 2 === 0 ? '#F0F0F0' : '#FFFFFF');
    tr.onclick = function() {
      google.maps.event.trigger(markers[i], 'click');
    };

    var iconTd = document.createElement('td');
    var nameTd = document.createElement('td');
    var icon = document.createElement('img');
    icon.src = markerIcon;
    icon.setAttribute('class', 'placeIcon');
    icon.setAttribute('className', 'placeIcon');
    var name = document.createTextNode(result.name);
    iconTd.appendChild(icon);
    nameTd.appendChild(name);
    tr.appendChild(iconTd);
    tr.appendChild(nameTd);
    results.appendChild(tr);
  }

  function clearResults() {
    var results = document.getElementById('results');
    while (results.childNodes[0]) {
      results.removeChild(results.childNodes[0]);
    }
  }

  // Get the place details for a hotel. Show the information in an info window,
  // anchored on the marker for the hotel that the user selected.
  function showInfoWindow() {
    var marker = this;
    places.getDetails({placeId: marker.placeResult.place_id},
        function(place, status) {
          if (status !== google.maps.places.PlacesServiceStatus.OK) {
            return;
          }
          infoWindow.open(map, marker);
          //place.url ="https://uorder.us";
          console.log("placeId "+ marker.placeResult.place_id);
          buildIWContent(place);

        });
  }

  // Load the place information into the HTML elements used by the info window.
  function buildIWContent(place) {

    document.getElementById('iw-icon').innerHTML = '<img class="hotelIcon" ' +
        'src="' + place.icon + '"/>';
    document.getElementById('iw-url').innerHTML = '<b><a href="' + place.url +
        '">' + place.name + '</a></b>';
    document.getElementById('iw-address').textContent = place.vicinity;

    if (place.formatted_phone_number) {
      document.getElementById('iw-phone-row').style.display = '';
      document.getElementById('iw-phone').textContent =
          place.formatted_phone_number;
    } else {
      document.getElementById('iw-phone-row').style.display = 'none';
    }

    // Assign a five-star rating to the hotel, using a black star ('&#10029;')
    // to indicate the rating the hotel has earned, and a white star ('&#10025;')
    // for the rating points not achieved.
    if (place.rating) {
      var ratingHtml = '';
      for (var i = 0; i < 5; i++) {
        if (place.rating < (i + 0.5)) {
          ratingHtml += '&#10025;';
        } else {
          ratingHtml += '&#10029;';
        }
      document.getElementById('iw-rating-row').style.display = '';
      document.getElementById('iw-rating').innerHTML = ratingHtml;
      }
    } else {
      document.getElementById('iw-rating-row').style.display = 'none';
    }

    // The regexp isolates the first part of the URL (domain plus subdomain)
    // to give a short URL for displaying in the info window.
    if (place.website) {
      var fullUrl = place.website;
      var website = hostnameRegexp.exec(place.website);
      if (website === null) {
        website = 'http://' + place.website + '/';
        fullUrl = website;
        }
      document.getElementById('iw-website-row').style.display = '';
      document.getElementById('iw-website').textContent = website;
    } else {
      document.getElementById('iw-website-row').style.display = 'none';
    }
  }

Function.php 文件

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // This is 'StanleyWP-style' for the StanleyWP-child.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); 

}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

<?php

function theme_js() {

    wp_register_script( 'gmap', '//maps.googleapis.com/maps/api/js?key=AIzaSyDb3ltGiSsOuY1LjK-jdUG4eDy97bN9H2g&libraries=places&callback=initMap', array ('jquery'), '1.0', true );

    wp_enqueue_script( 'theme_js', get_stylesheet_directory_uri() . '/js/hotelloc.js', array( 'gmap' ), '1.0', true );


}

add_action('get_footer', 'theme_js');


?>

和 sytle.css 文件

/*
Theme Name:   stanleywp-child
Theme URI:    http://example.com/twenty-fifteen-child/
Description:  Twenty Fifteen Child Theme
Author:       John Doe
Author URI:   http://example.com
Template:     stanleywp
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  stanleywp

*/

 html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
    width:100%;
  }
  table {
    font-size: 12px;
  }
  #listing {
    width: 440px;
    height: 900px;
    overflow: auto;
    left: 442px;
    top: 0px;
    cursor: pointer;
    overflow-x: hidden;
  }
  #findhotelss {
    position: absolute;
    text-align: right;
    width: 100px;
    font-size: 14px;
    padding: 4px;
    z-index: 5;
    background-color: #fff;
  }
  #locationField {
    position: absolute;
    width: 190px;
    height: 25px;
    left: 108px;
    top: 0px;
    z-index: 5;
    background-color: #fff;
  }
  #controls {
    position: absolute;
    left: 300px;
    width: 140px;
    top: 0px;
    z-index: 5;
    background-color: #fff;
  }
  #autocomplete {
    width: 100%;
  }
  #country {
    width: 100%;
  }
  .placeIcon {
    width: 20px;
    height: 34px;
    margin: 4px;
  }
  .hotelIcon {
    width: 24px;
    height: 24px;
  }
  #resultsTable {
    border-collapse: collapse;
    width: 240px;
  }
  #rating {
    font-size: 13px;
    font-family: Arial Unicode MS;
  }
  .iw_table_row {
    height: 18px;
  }
  .iw_attribute_name {
    font-weight: bold;
    text-align: right;
  }
  .iw_table_icon {
    text-align: right;
  }

谢谢

Answer 1

我终于知道如何正确加载地图了。

我的 html 出错了。这是正确的 HTML.

!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Hotel Search</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">

</head>

<body>

<div id="findhotels">
  Find hotels in:
</div>

<div id="locationField">
  <input id="autocomplete" placeholder="Enter a city" type="text" />
</div>

<div id="controls">
  <select id="country">
    <option value="all">All</option>
    <option value="au">Australia</option>
    <option value="br">Brazil</option>
    <option value="ca">Canada</option>
    <option value="fr">France</option>
    <option value="de">Germany</option>
    <option value="mx">Mexico</option>
    <option value="nz">New Zealand</option>
    <option value="it">Italy</option>
    <option value="za">South Africa</option>
    <option value="es">Spain</option>
    <option value="pt">Portugal</option>
    <option value="us" selected>U.S.A.</option>
    <option value="uk">United Kingdom</option>
  </select>
</div>

<div id="map"></div>

<div id="listing">
  <table id="resultsTable">
    <tbody id="results"></tbody>
  </table>
</div>

<div style="display: none">
  <div id="info-content">
    <table>
      <tr id="iw-url-row" class="iw_table_row">
        <td id="iw-icon" class="iw_table_icon"></td>
        <td id="iw-url"></td>
      </tr>
      <tr id="iw-address-row" class="iw_table_row">
        <td class="iw_attribute_name">Address:</td>
        <td id="iw-address"></td>
      </tr>
      <tr id="iw-phone-row" class="iw_table_row">
        <td class="iw_attribute_name">Telephone:</td>
        <td id="iw-phone"></td>
      </tr>
      <tr id="iw-rating-row" class="iw_table_row">
        <td class="iw_attribute_name">Rating:</td>
        <td id="iw-rating"></td>
      </tr>
      <tr id="iw-website-row" class="iw_table_row">
        <td class="iw_attribute_name">Website:</td>
        <td id="iw-website"></td>
      </tr>
    </table>
  </div>
</div>

我将地图的高度 div 从 100% 更改为 500px。

 html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 500px;
    width:100%;
  }
  table {
    font-size: 12px;
  }
  #listing {
    width: 440px;
    height: 900px;
    overflow: auto;
    left: 442px;
    top: 0px;
    cursor: pointer;
    overflow-x: hidden;
  }
  #findhotelss {
    position: absolute;
    text-align: right;
    width: 100px;
    font-size: 14px;
    padding: 4px;
    z-index: 5;
    background-color: #fff;
  }
  #locationField {
    position: absolute;
    width: 190px;
    height: 25px;
    left: 108px;
    top: 0px;
    z-index: 5;
    background-color: #fff;
  }
  #controls {
    position: absolute;
    left: 300px;
    width: 140px;
    top: 0px;
    z-index: 5;
    background-color: #fff;
  }
  #autocomplete {
    width: 100%;
  }
  #country {
    width: 100%;
  }
  .placeIcon {
    width: 20px;
    height: 34px;
    margin: 4px;
  }
  .hotelIcon {
    width: 24px;
    height: 24px;
  }
  #resultsTable {
    border-collapse: collapse;
    width: 240px;
  }
  #rating {
    font-size: 13px;
    font-family: Arial Unicode MS;
  }
  .iw_table_row {
    height: 18px;
  }
  .iw_attribute_name {
    font-weight: bold;
    text-align: right;
  }
  .iw_table_icon {
    text-align: right;
  }

在我的 functions.php 文件中，我不得不重新排列脚本。调用的主文件是 maps.googleapis.com/map 并且它具有 hotelloc.js 文件的依赖项。

<?php
function my_theme_enqueue_styles() {

$parent_style = 'parent-style'; // This is 'StanleyWP-style' for the StanleyWP-child.

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css'   );

}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

<?php

function theme_js() {

    wp_enqueue_script( 'gmap', '//maps.googleapis.com/maps/api/js?key=AIzaSyDb3ltGiSsOuY1LjK-jdUG4eDy97bN9H2g&libraries=places&callback=initMap', array ('theme_js'), '1.0', true );

    wp_register_script( 'theme_js', get_stylesheet_directory_uri() . '/js/hotelloc.js', array(), '1.0', true );



}

add_action('wp_footer', 'theme_js');


?>

我现在正在研究如何使地图响应不同尺寸的屏幕。

如果过几天我还是想不出来，我会开一个新的问题。

wordpress 子主题 google 地图 api google 地方

wordpress child theme google map api google places

javascript

wordpress

themes