如何在創建後操作Google Map？

我應該警告你，我對網站創建和JavaScript非常陌生。就這樣。正因爲如此，我在創建一個網站上有一個谷歌地圖小部件。它使得地圖創建非常簡單，但如果我確實需要，我想我可以嘗試自己編碼。除此之外，我想在地圖的一側添加按鈕，這些按鈕將轉到我創建的一些標記。如何在創建後操作Google Map？

我很難讓地圖對象在創建後對其進行操作。我似乎無法找到小部件稱之爲地圖對象的東西，所以我不能使用將我的地圖變量變爲全局對象的想法。

我只是想改變默認縮放開始。下面是我基本上試圖做的事情，但是每當執行代碼時，我的地圖就變成了我屏幕上的一個灰色框。

<html> 
<head> 
<style> 
    #map { 
    width: 500px; 
    height: 400px; 
    margin: 0 auto 0 auto; 
    } 
</style> 
</head> 
<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script> 
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script> 
<body> 
<div id="map"></div> 
<script> 

    function initMap() { 
    var map; 
    var myOptions = { 
     center: {lat: 40, lng: 50}, 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     } 
    var mapDiv = document.getElementById('map'); 
    map = new google.maps.Map(mapDiv, myOptions); 
    } 
    google.maps.event.addDomListener(window, 'load', init_map); 
</script> 

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> 

<script> 
    function newLocation(newLat, newLng) { 
    //var mymap = new google.maps.Map(document.getElementById('map')); 
    var mymap = document.getElementById('map'); 
    mymap.setZoom(4); 
    } 
</script> 
<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="newLocation(45,88)"> 
<body> 
</html>

縱觀谷歌開發者工具我得到這個錯誤「遺漏的類型錯誤：mymap.setZoom不是一個函數」。我想這意味着我得到的不是地圖本身的地圖區域。

因此，有可能抓住地圖的一個實例，以便我可以操縱它嗎？

來源

2016-02-29 orangestorm87

'map'是地圖對象。 'mymap'不過是一個引用地圖DOM元素的變量。你需要將你的代碼移到'initMap'函數或者在全局聲明'map'變量，以便它可以在'newLocation'函數中訪問（當然也可以使用'map.setZoom（4）'而不是' mymap.setZoom（4）'）。 – MrUpsidown

不幸的是，以上只是我試圖用新位置做的一個例子。地圖和標記的完整創建由小部件完成。由於我對這一切都是陌生的，我無法破譯所有頁面源代碼spahgetti。 – orangestorm87

https://siteorigin.com/widgets-bundle/google-maps-widget/這是我相信你可以用這個小部件做什麼。如果您需要更多交互/自定義行爲，爲什麼不要忘記插件並集成自己的Google地圖代碼？我相信你可以在Wordpress上找到如何做到這一點的信息，如果你不知道如何去做... – MrUpsidown

你不引用您在initMap()

創造什麼，我想改變的是使map變量全球性的，所以你的所有功能，包括newLocation()可以訪問此map變量的正確map變量。

你實現在newLocation()功能使用mymap，這個訪問地圖，而不是實際map object本身，這就是爲什麼你不能改變，如zoom性質的div容器。

嘗試構建它就像這樣，所以你有正確的參考地圖變量。

<html> 
<head> 
<style> 
    #map { 
    width: 500px; 
    height: 400px; 
    margin: 0 auto 0 auto; 
    } 
</style> 
</head> 
<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE"></script> 
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script> 
<body> 
<div id="map"></div> 
<script> 
    var map; 

    function initMap() { 
    var myOptions = { 
     center: {lat: 40, lng: 50}, 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var mapDiv = document.getElementById('map'); 
    map = new google.maps.Map(mapDiv, myOptions); 
    } 

    google.maps.event.addDomListener(window, 'load', init_map); 

    function newLocation(newLat, newLng) { 
    map.setZoom(4); 
    } 
</script> 

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> 

<INPUT TYPE="button" NAME="myButton" VALUE="Press This" onclick="newLocation(45,88)"> 
<body> 
</html>

來源

2016-02-29 16:55:45

這很好。但正如他所說，他對javascript「非常新穎」，你可能想解釋一下哪些工作不正常以及如何修復它。 – MrUpsidown

幹得好。你有我的祝福！ – MrUpsidown

唉，我知道這是一個解決方案。不過，我並沒有真正創建谷歌地圖，這個WordPress的小部件是。所以我不認爲我有權將地圖變量狀態更改爲全局。我實際上無法在頁面源中找到他們稱之爲的內容。所以這就是爲什麼我希望以其他方式抓住它，只是在newLocation函數中操縱我需要的東西。 – orangestorm87

如何在創建後操作Google Map？

回答

相關問題