Question

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

以下是示例绘图页面Google Developers Drawing tools的链接。您可以在此处看到6个绘图选项。

我想在这6个选项中添加我的选项，我该怎么做？

Answer 1

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

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

并通过您的javascript调用它来调用Google drawingManager

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

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

Initiate polygon drawing from custom button

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 demo

Answer 3

要向地图添加自定义叠加层，例如offcial documentation中的示例，您只需创建一些HTML来创建按钮，取自this example from the documentation。

<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>

还可以帮助您以更好的方式显示按钮custom controls，您可以在地图中的不同位置显示按钮并将按钮存储在那里。

PS：来自谷歌的绘图工具只不过是谷歌地图控件，所以如果你想显示你自己的绘图工具，如谷歌那么自定义控件就是你要找的东西。

编辑以回答原始问题：

根据API Documention，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

此示例中还描述了：

home control example

    //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 个答案: