地图显示 TypeError: $ is not a function in wordpress答案

【问题标题】：Map shows TypeError: $ is not a function in wordpress地图显示 TypeError: $ is not a function in wordpress
【发布时间】：2017-12-22 23:48:46
【问题描述】：

我正在尝试在网站上显示谷歌地图。我不想使用嵌入方法，所以使用异步延迟方法。

奇怪的是我的代码在 html 文件中运行良好，但是当我在 wordpress 中使用它时，我得到 TypeError: $ is not a function error。

我在wordpress中使用时html文件和typeError怎么没有类型错误？

 <script>
  var rating;
  var address;
  var name;
  var infoWindow = null;
  function initMap() {
    var map = new google.maps.Map(document.getElementById('mapDiv'), {
      center: {lat: 33.531495, lng: -88.42207},
      zoom: 19
    });
    var infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.getDetails({
      placeId: 'ChIJJdJXNmjphogRo-W21kkhbJg'
    }, function(place, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        rating = place.rating;
        name = place.name;

        //var labelIndex = 50;
        address = "<div>" + place.formatted_address + "</div>"
        var marker = new google.maps.Marker({
            map: map,
            position: place.geometry.location,

        });

          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
          place.formatted_address + '</div>');

          infowindow.open(map, marker);


         google.maps.event.addListener(map, 'idle', function(e) {

// Prevents card from being added more than once (i.e. when page is resized and google maps re-renders)
if ( $( ".place-card" ).length === 0 ) {
$(".gm-style").append('<div style="position: absolute; left: 0px; top: 34px;"> <div style="margin: 10px; padding: 1px; -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; border-radius: 2px; background-color: white;"> <div> <div class="place-card place-card-large"> <div class="place-desc-large"> <div class="place-name"></div><div class="image-place"><img id="photoLocation" src="" style="position: static; top: 0px;left: 0px;width: 175px;height: 165px;"></div><div class="address"></div></div><div class="navigate"> <div class="navigate"> <a class="navigate-link" href="https://www.google.com/maps/dir//33.53151,-88.422063/@33.53151,-88.422063,18z" target="_blank"> <div class="icon navigate-icon"></div><div class="navigate-text"> Directions </div></a> </div></div><div class="review-box"> <div id="review-number" class="review-number"></div><a href="http://www.google.co.in/search?q=Porter,+Singley,+%26+Crane+Family+Dentistry,+2900+Bluecutt+Rd+%232,+Columbus,+MS+39705,+EE.+UU.&ludocid=10983190192268436899#lrd=0x8886e9683657d225:0x986c2149d6b6e5a3,1" class="review-box-link" target="_blank">Reviews</a> </div><div class="saved-from-source-link" style="display:none"> </div><div class="maps-links-box-exp"> <div class="time-to-location-info-exp" style="display:none"> <span class="drive-icon-exp experiment-icon"></span><a class="time-to-location-text-exp" style="display:none" target="_blank"></a><a class="time-to-location-text-exp" style="display:none" target="_blank"></a> </div><div class="google-maps-link"> <a href="https://www.google.com.py/maps/place/Porter,+Singley,+%26+Crane+Family+Dentistry/@33.53151,-88.4242517,17z/data=!3m1!4b1!4m5!3m4!1s0x8886e9683657d225:0x986c2149d6b6e5a3!8m2!3d33.53151!4d-88.422063?hl=es-419" target="_blank">View larger map</a> </div></div></div></div>');
    //$(".review-number").append(rating);
    $("#review-number").append(rating);
       fillCard(place);
       //function to resize the map, responsive.
       google.maps.event.addDomListener(window, 'resize', function() {
            var center = googleMap.getCenter();
            google.maps.event.trigger(googleMap, "resize");
            googleMap.setCenter(center);
        });
   }
  });


      }
    });
              function fillCard(place){
                 var photos = place.photos;
                 var countRatig = rating.toString().slice(0,1);
                $(".address").append(address);
                $(".place-name").append(name);
                $("#photoLocation").attr("src", photos[1].getUrl({'maxWidth': 175, 'maxHeight': 138}))
                for (var i=0; i<countRatig; ++i ){
                    $("#review-number:nth-child(1)").append('<div class="icon rating-star rating-full-star"></div>');
                }
      }

  }
</script>

【问题讨论】：

确保您的 jQuery <script> 标记在您的 <head> 中。
我也试过了。通过谷歌搜索@PHPglue 尝试了大多数解决方案
在当前主题的functions.php 文件中添加this 代码。不要忘记将/js/my-great-script.js 更改为this link
@AniketSahrawat 但 wordpress 核心 jquery 已经存在。而且我仍然将脚本排入队列。但地图没有显示。但是 typeError 现在消失了，给出了错误“ReferenceError: googleMap is not defined”
确保你有google map api source js，或者访问this阅读helloworld示例。

标签： javascript jquery wordpress google-maps

【解决方案1】：

尝试使用jQuery 而不是$，因为如果我记得的话，wordpress 使用jQuery.noConflict() 模式。

例子：

if ( jQuery( ".place-card" ).length === 0 ) { ...

【讨论】：

也许这是个愚蠢的问题，但是在执行此脚本之前，您是否添加了一个 jQuery js 文件？
是的@Przemek。 wordpress 核心 jquery 在标题中。我的 js 和 google map api js 在正文中。

【解决方案2】：

将每个 $ 符号更改为 jQuery

wordpress 不支持 $

【讨论】：

这样做会给出 'Uncaught ReferenceError: googleMap is not defined'

【解决方案3】：

最好将整个函数放在文档就绪函数中。所以脚本在页面加载后执行。而且您可以像这样保留 $ 符号：

jQuery(document).ready(function( $ ) {

  // Your function goes here...
  if ( $( ".place-card" ).length === 0 ) {
   //...
  }

});

【讨论】：