我如何在谷歌地图上添加自己的图像或绘图选项

How i add my own image or drawing option on google map drawing

本文关键字：图像 自己的 绘图 选项 添加 谷歌地图      更新时间：2023-09-26

我想添加自己的button以启用Google map drawing中的特性。

这里是示例绘图页面的链接谷歌开发人员绘图工具在这里你可以看到6个绘图选项。

我想把我的选项添加到这6个选项中，我该怎么做?

从在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);
 });

从自定义按钮开始绘制多边形

我不认为你可以像评论中所说的那样在绘图管理器控件中添加自定义控件。但是通过一些样式，你可以在它旁边添加你自己的控件，使它看起来像它是组的一部分。

你需要的是将你的自定义控件添加到与绘图控件相同的控件位置:

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

检查演示。它可能不完美，但你知道的。

<<p> JSFiddle演示/kbd>

同样在这个例子中描述:

home control示例

    //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)
    }); 
},
最好

要像官方文档中的示例那样为地图添加自定义覆盖，您只需要创建一些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.

所以我不认为有可能从谷歌添加自定义覆盖到给定的控件。但正如评论中提到的，你可以创建一个自定义控件，并像谷歌的样式一样显示在它们旁边。

相关文章：