我如何在谷歌地圖繪圖上添加自己的圖像或繪圖選項

Question

我想添加自己的button以在Google map drawing啟用我的功能。

以下是示例繪圖頁面的鏈接Google Developers繪圖工具在這里您可以看到6個繪圖選項。

我想在這6個選項中添加我的選項，我該怎么做？

Answer 1

首先在HTML中添加自己的按鈕

<button id="custom-BtnPolygon">Draw</button>
<button id="custom-BtnPolyline">Draw</button>

並從您的JavaScript調用它來調用谷歌drawingManager

$("#custom-BtnPolygon").click( function(){
      drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
 });

$("#custom-BtnPolyline").click( function(){
      drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYLINE);
 });

從自定義按鈕啟動多邊形繪制

Answer 2

我不認為您可以在評論中說明的情況下向繪圖管理器控件添加自定義控件。 但是通過一些樣式，你可以在它旁邊添加你自己的控件，使它看起來像是組的一部分。

您需要的是將自定義控件添加到與繪圖控件相同的控件位置：

drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: [
    google.maps.drawing.OverlayType.MARKER,
    google.maps.drawing.OverlayType.CIRCLE,
    google.maps.drawing.OverlayType.POLYGON,
    google.maps.drawing.OverlayType.POLYLINE,
    google.maps.drawing.OverlayType.RECTANGLE]
}

map.controls[google.maps.ControlPosition.TOP_CENTER].push(yourCustomControl);

檢查演示。 它可能不完美，但你明白了。

JSFiddle演示

Answer 3

要向地圖添加自定義疊加層，就像在官方文檔中的示例一樣，您只需要創建一些HTML來創建按鈕，從文檔中的示例中獲取。

<body>

<!-- [START region_toolbar] -->
<!-- Add an input button to initiate the toggle method on the overlay. -->
<div id ="panel">
    <input type="button" value="Toggle visibility" onclick="overlay.toggle();"></input>
    <input type="button" value="Toggle DOM attachment" onclick="overlay.toggleDOM();"></input>
</div>
<!-- [END region_toolbar] -->
<div id="map-canvas"></div>
</body>

除此之外的一切都只是純CSS，你如何設計按鈕和其他東西。

<style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
</style>

什么也可以幫助您以更好的方式顯示按鈕是自定義控件，您可以在地圖中的不同點顯示它們並將按鈕存儲在那里。

PS：來自谷歌的繪圖工具只不過是谷歌地圖控件，所以如果你想顯示你自己的繪圖工具，如谷歌，自定義控件是你正在尋找的東西。

編輯以回答原始問題：

根據API文檔， DrawingManager僅接受來自google和null的給定值。 給定值是靜態值。

實際引用：

The DrawingManager's drawing mode, which defines the type of overlay to be added on the map. Accepted values are MARKER, POLYGON, POLYLINE, RECTANGLE, CIRCLE, or null. A drawing mode of null means that the user can interact with the map as normal, and clicks do not draw anything.

所以我認為沒有可能向Google的給定控件添加自定義疊加層。 但正如評論中所提到的，您可以創建一個自定義控件，並將其設置為類似Google的一個，並將其顯示在它們旁邊。

Answer 4

此示例中還描述了：

家庭控制的例子

    //set the custom control
    var homeControlDiv = document.createElement('DIV'),
    homeControl = new mymap.HomeControl(homeControlDiv, map);

    homeControlDiv.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);

   //function   
   HomeControl: function(controlDiv, map) {

    controlDiv.style.padding = '5px';
    var controlUI = document.createElement('DIV');
    controlUI.style.backgroundColor = 'white';
    controlUI.style.borderStyle = 'solid';
    controlUI.style.borderColor ='#365e00';
    controlUI.style.borderWidth = '2px';
    controlUI.style.cursor = 'pointer';
    controlUI.style.textAlign = 'center';
    controlUI.title = 'Home';
    controlDiv.appendChild(controlUI);

    var controlText = document.createElement('DIV');
    controlText.style.fontFamily = 'Arial,sans-serif';
    controlText.style.fontSize = '12px';
    controlText.style.paddingLeft = '6px';
    controlText.style.paddingTop = '1px';
    controlText.style.paddingBottom = '1px';
    controlText.style.paddingRight = '6px';
    controlText.innerHTML = '<b>Home</b>';
    controlUI.appendChild(controlText);

    google.maps.event.addDomListener(controlUI, 'click', function() {
    var home = new google.maps.LatLng(50.0019, 10.1419);
    map.setCenter(home)
    map.setZoom(6)

    }); 
},

最好

中號

我如何在谷歌地圖繪圖上添加自己的圖像或繪圖選項

問題描述

4 個解決方案

解決方案1
7 2015-01-20 23:52:57

解決方案2
5 已采納 2014-05-23 13:06:04

解決方案3
0 2014-05-23 12:14:35

解決方案4
0 2014-05-23 12:23:25

我如何在谷歌地圖繪圖上添加自己的圖像或繪圖選項

問題描述

4 個解決方案

解決方案1 7 2015-01-20 23:52:57

解決方案2 5 已采納 2014-05-23 13:06:04

解決方案3 0 2014-05-23 12:14:35

解決方案4 0 2014-05-23 12:23:25

解決方案1
7 2015-01-20 23:52:57

解決方案2
5 已采納 2014-05-23 13:06:04

解決方案3
0 2014-05-23 12:14:35

解決方案4
0 2014-05-23 12:23:25