-1

2个文件地图插件-github

我愿意放弃,请帮助...这里的菜鸟。

使用从谷歌样式地图向导站点事物生成的代码创建自定义样式谷歌地图按照说明和各种教程、jsfiddles 和各种教程,我很困惑。

我把代码放到了 GitHub 上,这样你就可以看到我正在使用什么。在我的网站上,scripts.js 位于文件夹内,(第一次在 GitHub/JS 和 PHP 的新手上,不知道如何将 js 文件移动到 GitHub 上的文件夹中,哈哈)

已确认所有脚本都在头部加载 - 是的,我的页面上正在加载 CSS 正在加载 #put-map {height:300px; width:300px;} 但实际地图不是 API 正在从本地主机工作(使用 apu 和自定义样式地图测试的静态 html 页面)浏览器中没有错误只是不显示实际地图。是不是事件监听器 - addDomListener - 也许有什么不对 - 我不知道。

我正在尝试创建简单的超精简版基本地图插件,当我想使用地图时,我可以替换样式或位置代码,我过于依赖 Elementor 网站变得非常笨重,所以试图扩展我的知识以减少依赖于视觉页面构建器......非常感谢任何提供帮助的提议,

这是我的第一个 js 项目,我猜我只是错过了一些小东西,或者完全关闭了……无论如何,我只在这里包含了 JS,因为我 95% 确定 php 没问题,但是链接到整件事都在上面

干杯尼斯

jQuery.noConflict();
// JS for Google Map with Custom Style obtained https://mapstyle.withgoogle.com/
// Function to create the map
function initMap() {

// create variable themap and define the element id for use in html ie to be used like: <div id="put-map"></div>
var themap = document.getElementById( 'put-map' );

// create variable mapOptions and define options and information for the map to display     
var mapOptions = {
// Generated long and lat from https://www.latlong.net/
  center: {
    lat: -37.345,
    lng: 144.146
      },
    zoom: 12,
    
    // Disable all the controls https://developers.google.com/maps/documentation/javascript/controls
    // in this case i don't want the use to have any options to change the map position or zon in etc.
    
    disableDefaultUI: true,
 
       //******************************************************************************
       //
       //  Custom map visual styling
       //  Styles applied from wizard https://mapstyle.withgoogle.com/
       //   - Cut and paste JSON Code from below //**** to above next //****
       //******************************************************************************
       
    styles: [
      {
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#f5f5f5"
          }
        ]
      },

更多风格的代码在这里,但为了让它更短,我在星星之间从谷歌的 JSON 中删减并过去了

    ] 
    //****************************************************************************** 
//end of Style part 
  }; //end of Map Options
// create a new map using the information and options defined in the variables themap and mapOptions
var map = new google.maps.Map( themap, mapOptions );     
  }  //ends function initMap 
// Create a DOM event to tell the site to load the createmap function when it finds <div id="mymap"></div> on the web page 
google.maps.event.addDomListener( window, 'load', initMap );

再次感谢。

4

1 回答 1

0

哦,太兴奋了,我把它复杂化了……我认为我有大部分正确的部分,但在错误的地方,我已经很接近了。我还认为我可能一直在更新我激活的插件之外的 script.js 文件,因此这些更改实际上并没有反映在页面上 - 新手错误呃,无论哪种方式我都已经清理了它并且它的工作。

最终,我发现这个很棒的视频隐藏在所有如何使用带有 HTML embed/iframe 的 Google 地图或如何获取 API 中 :( 但这个视频实际上向您展示了 Traversay Media 的 Google Maps JavaScript API 教程,足以获得正确的想法...我只需要前几分钟,因为视频继续教程如何添加我不需要的标记和其他花哨的功能。

我有一个 GitHub 存储库(Git 也是新的),在代码中我已经过评论来解释 PHP/JS 中发生了什么(我认为),我用什么资源从谷歌地图向导生成代码位,其中某些变量和名称必须相同,并且您需要在哪里进行更改。没有关于获取 JavaScript Map API 的说明,周围有很多这样的说明。

该插件由 3 个非常短的文件组成,所以我确信有不同的方式来呈现代码的某些部分,或者更有效地进行某些方式,请记住我还在学习这是我的第一个插件,首先完成了一点真正的 PHP,以及第一次使用 JavaScript

真的很高兴我从自己发现的资源中解决了问题,这真的很令人兴奋。我希望这对其他人有帮助。

GitHub - Vanessa 的 Googlemap-wp

于 2020-09-03T06:26:36.527 回答