Javascript 映射显示TypeError:$不是wordpress中的函数
我试图在网站上显示谷歌地图。我不想使用嵌入方法,所以使用异步延迟方法 奇怪的是,我的代码在html文件中运行良好,但在wordpress中使用它时,我得到的TypeError:$不是函数错误 当我在wordpress中使用html文件时,为什么没有类型错误和类型错误Javascript 映射显示TypeError:$不是wordpress中的函数,javascript,jquery,wordpress,google-maps,Javascript,Jquery,Wordpress,Google Maps,我试图在网站上显示谷歌地图。我不想使用嵌入方法,所以使用异步延迟方法 奇怪的是,我的代码在html文件中运行良好,但在wordpress中使用它时,我得到的TypeError:$不是函数错误 当我在wordpress中使用html文件时,为什么没有类型错误和类型错误 <script> var rating; var address; var name; var infoWindow = null; function initMap() { var ma
<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>
var评级;
var地址;
变量名;
var infoWindow=null;
函数initMap(){
var map=new google.maps.map(document.getElementById('mapDiv'){
中心:{lat:33.531495,lng:-88.42207},
缩放:19
});
var infowindow=new google.maps.infowindow();
var service=newgoogle.maps.places.PlacesService(地图);
service.getDetails({
placeId:'ChIJJdJXNmjphogRo-W21kkhbJg'
},功能(地点、状态){
if(status==google.maps.places.PlacesServiceStatus.OK){
评级=地点。评级;
name=place.name;
//var labelIndex=50;
address=“”+place.formatted_address+“”
var marker=new google.maps.marker({
地图:地图,
位置:place.geometry.location,
});
infowindow.setContent(“”+place.name+”
'+
place.u地址+“”);
信息窗口。打开(地图、标记);
google.maps.event.addListener(映射,'idle',函数(e){
//防止卡被多次添加(即当页面调整大小和google maps重新呈现时)
如果($(“.place card”).length==0){
$(“.gm样式”).append(“”);
//$(“.review number”)。追加(评级);
$(“#审查编号”)。附加(评级);
填写卡片(地点);
//功能调整地图大小,响应速度快。
google.maps.event.addDomListener(窗口,“调整大小”,函数(){
var center=googleMap.getCenter();
google.maps.event.trigger(googleMap,“resize”);
谷歌地图。设置中心(中);
});
}
});
}
});
功能填写卡(位置){
var photos=place.photos;
var countRatig=rating.toString().slice(0,1);
$(“.address”)。追加(地址);
$(“.place name”)。追加(名称);
$(“#photoLocation”).attr(“src”,photos[1].getUrl({'maxWidth':175,'maxHeight':138}))
对于(var i=0;i尝试使用jQuery
而不是$
,因为wordpress使用jQuery.noConflict()
模式,如果我记得很清楚的话
例如:
if(jQuery(“.place card”).length==0{…
将每个$symbol更改为jQuery
wordpress不支持$,最好将整个函数放在一个文档就绪函数中。因此,脚本在页面加载后执行。您可以像这样保留$符号:
jQuery(document).ready(function( $ ) {
// Your function goes here...
if ( $( ".place-card" ).length === 0 ) {
//...
}
});
确保你的jQuery
标记在你的
中。我也试过了。通过在你的函数.php
文件中搜索@PHPglueAdd code尝试了大多数解决方案。不要忘了将/js/my great script.js
更改为@AniketSahrawat,但wordpress core jQuery已经存在。我仍然在脚本队列中。但地图未显示。但typeError已消失,出现错误“ReferenceError:googleMap未定义”确保您有google map api源js,或者访问以阅读helloworld示例。也许这是一个愚蠢的问题,但在执行此脚本之前是否添加了jQuery js文件?是的@Przemek.wordpress core jQuery在标题中。我的js和google map api js在正文中。这样做会给出“未捕获的引用错误:google map未定义”