在 javascript Themezy 模板中向 map 添加標記

Question

我從這里下載了一個免費模板，它有一個contact.html文件，以及一個包含app.js 、 jquery-1.11.1.min.js 、 jquery1.11.1.min.map和plugins.js文件的js目錄。 我編輯了plugins.js文件並更改了中心和縮放，但我一直在嘗試添加標記和自定義圖標，但我找不到哪個文件以及我必須如何編輯它； 它使用 Gmap3。 app.js文件包含：

if ($(".map").length) {
    $('.map').gmap3({
            map: {
                options: {
                    maxZoom: 14
                }
            },
            marker: {
                address: "40 Sibley St, Detroit",
            }
        },
        "autofit");
}
});

Answer 1

“40 Sibley St, Detroit”上已經放置了一個默認標記。 In order for it to be displayed on the map though, and for the map itself to load successfully, you first need to add your own project's API key to the Maps API script (in modern_architecture/HTML/contact.html ):

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>

像這樣：

<script src="https://maps.google.com/maps/api/js?sensor=false&amp;language=en&key=AIza..."></script>

確保您還將http替換為https 。

注意：您必須從已啟用計費的項目中添加有效的 API 密鑰以及 JavaScript API 和地理編碼 ZDB9742318048 啟用的 JavaScript。 請通過 Google 的入門指南go 。

一旦您的 map 和標記出現，要更改標記的地址，請使用您自己的位置（在app.js中）修改默認地址：

marker:{
    address: "Paris, France", // whatever your location is
}

並添加自定義圖標試試這個：

marker:{
    address: "Paris, France",
    options: {
        icon: "https://maps.google.com/mapfiles/marker_green.png"
    }
}

這是我的本地 map 實現在上述更改后的樣子：

希望這可以幫助！