如何在Google Maps API上定位自定義按鈕控件？

我已經建立了谷歌地圖API V3這個簡單的地圖....如何在Google Maps API上定位自定義按鈕控件？

<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     var map; 
     function initMap() { 



     var myOptions = { 
      zoom: 8, 
      center: {lat: -34.397, lng: 150.644}, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), myOptions); 


     //### Add a button on Google Maps ... 
     var controlMarkerUI = document.createElement('DIV'); 
     controlMarkerUI.style.cursor = 'pointer'; 
     controlMarkerUI.style.backgroundImage = "url(http://localhost/marker.png)"; 
     controlMarkerUI.style.height = '28px'; 
     controlMarkerUI.style.width = '25px'; 
     controlMarkerUI.style.top = '11px'; 
     controlMarkerUI.style.left = '120px'; 
     controlMarkerUI.title = 'Click to set the map to Home'; 
     //myLocationControlDiv.appendChild(controlUI); 

     map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlMarkerUI); 

     //### Add a button on Google Maps ... 
     var controlTrashUI = document.createElement('DIV'); 
     controlTrashUI.style.cursor = 'pointer'; 
     controlTrashUI.style.backgroundImage = "url(http://localhost/trash.png)"; 
     controlTrashUI.style.height = '28px'; 
     controlTrashUI.style.width = '25px'; 
     controlTrashUI.style.top = '11px'; 
     controlTrashUI.style.left = '150px'; 
     controlTrashUI.title = 'Click to set the map to Home'; 
     //myLocationControlDiv.appendChild(controlUI); 

     map.controls[google.maps.ControlPosition.LEFT_TOP].push(controlTrashUI); 
} 

    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=<PUT_YOUR_API-HERE>&callback=initMap" 
    async defer></script> 
    </body> 
</html>

地圖結果是遵循

在我的代碼風格的兩個按鈕，標記和垃圾，在某種程度上是768,16拋開「衛星」按鈕以這種方式

設置

爲什麼我的風格設置不被保留？

建議/例子？

來源

2017-06-14 Cesare

我有一個答案，而不是100％，如果這是你正在尋找，但這裏是修改後的代碼。

<html> 
<head> 
<title>Simple Map</title> 
<meta name="viewport" content="initial-scale=1.0"> 
<meta charset="utf-8"> 
<style> 
    /* Always set the map height explicitly to define the size of the div 
    * element that contains the map. */ 
    #map { 
    height: 100%; 
    } 
    /* Optional: Makes the sample page fill the window. */ 
    html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
</style> 
</head> 
<body> 

<div id="map"></div> 

<script> 
    var map; 
    function initMap() { 

     var myOptions = { 
      zoom: 8, 
      center: {lat: -34.397, lng: 150.644}, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), myOptions); 

     // Create a div to hold the control. 
     var controlDiv = document.createElement('div'); 

     //### Add a button on Google Maps ... 
     var controlMarkerUI = document.createElement('div'); 
     controlMarkerUI.style.cursor = 'pointer'; 
     controlMarkerUI.style.backgroundColor = 'blue'; 
     controlMarkerUI.style.height = '28px'; 
     controlMarkerUI.style.width = '25px'; 
     controlMarkerUI.style.marginLeft = '10px'; 
     controlMarkerUI.style.marginTop = '10px'; 
     controlMarkerUI.title = 'Click to set the map to Home'; 
     controlDiv.appendChild(controlMarkerUI); 


     //### Add a button on Google Maps ... 
     var controlTrashUI = document.createElement('div'); 
     controlTrashUI.style.cursor = 'pointer'; 
     controlTrashUI.style.backgroundColor = 'black'; 
     controlTrashUI.style.height = '28px'; 
     controlTrashUI.style.width = '25px'; 
     controlTrashUI.style.marginLeft = '60px'; 
     controlTrashUI.title = 'Click to set the map to Home'; 
     controlMarkerUI.appendChild(controlTrashUI); 

     map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlDiv); 

} 

</script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=<PUT KEY 
HEREEEE>&callback=initMap" 
async defer></script> 
    </body> 
</html>

，你將不得不改變你的徽標回本地主機，我認爲這是做你想要的最好的方式。不要忘記你的API密鑰！

輸出： the result

來源

2017-06-14 22:55:35 hunterzzpro

如何在Google Maps API上定位自定義按​​鈕控件？

回答

相關問題

如何在Google Maps API上定位自定義按鈕控件？