谷歌地图上传到服务器后不显示，本地工作正常

Question

我正在尝试实现一个启用了谷歌地图的简单页面，但我遇到了一个问题，即我的谷歌地图标记在将文件上传到主机后没有显示，它在本地工作正常。

这是我正在使用的脚本

var styles = [
    {
      "featureType":"landscape",
      "stylers":[
          {"saturation":-100},
          {"lightness":65},
          {"visibility":"on"}
          ]
        },
      {
        "featureType":"poi",
        "stylers":[
            {"saturation":-100},
            {"lightness":51},
            {"visibility":"simplified"}
            ]
          },
      {
        "featureType":"road.highway",
        "stylers":[
            {"saturation":-100},
            {"visibility":"simplified"}
            ]
          },
      {
        "featureType":"road.arterial",
        "stylers":[
            {"saturation":-100},
            {"lightness":30},
            {"visibility":"on"}
            ]
          },
      {
          "featureType":"road.local",
          "stylers":[
            {"saturation":-100},
            {"lightness":40},
            {"visibility":"on"}
            ]
          },
      {
          "featureType":"transit",
          "stylers":[
            {"saturation":-100},
            {"visibility":"simplified"}
            ]
          },
      {
          "featureType":"administrative.province",
          "stylers":[{"visibility":"on"}
            ]
          },
      {
          "featureType":"water",
          "elementType":"labels",
          "stylers":[
            {"visibility":"on"},
            {"lightness":-25},
            {"saturation":-100}
            ]
          },
      { 
          "featureType":"water",
          "elementType":"geometry",
          "stylers":[
            {"hue":"#ffffff"},
            {"lightness":0},
            {"saturation":0}
            ]
          }
      ];

$("#my-map").gmap3({
    marker:{
      address: '96 New Moor St, Colombo'
    },
    map:{
      options:{
          styles: styles,
            zoom: 14,
            scrollwheel: false,
            draggable: true,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
                },
            mapTypeControl: false,
            scaleControl: false,
            scrollwheel: false,
            streetViewControl: false
        }
    }
});

// Show Map
$(".show-map").click(function(){ 
    if ($(".map").hasClass("opened")) {    
            $(".map").removeClass("opened");
            $(".show-map i").removeClass("fa-minus");
            $(".show-map span").text("Show Map");
        }
    else {   
            $(".map").addClass("opened");
            $(".show-map i").addClass("fa-minus");
            $(".show-map span").text("Hide Map");
        }
});

Answer 1

sn-p 给出错误 "$ is not defined" 。我认为您在将文件上传到服务器时错过了代码中的 JQuery 导入，因为这似乎是问题所在。