如何在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上定位自定义按钮控件？