首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Javascript HTML按钮单击将标记添加到地图

Javascript HTML按钮单击将标记添加到地图
EN

Stack Overflow用户
提问于 2015-03-05 00:48:50
回答 3查看 2.9K关注 0票数 1

我正在使用谷歌地图应用程序接口V3与绘图管理器,以添加和保存标记到地图。它可以很好地与默认的绘图管理器工具配合使用。我将drawingMode设置为null,因此在单击标记按钮之前它是不活动的-这适用于默认设置。

我现在有了自己的自定义HTML按钮,当单击它时,它会激活绘图管理器标记工具:

代码语言:javascript
运行
复制
<button id="add-event-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Event</button>

我的Javascript是:

代码语言:javascript
运行
复制
document.getElementById('add-event-button').onclick = function()
{
    drawingMode: google.maps.drawing.OverlayType.MARKER;
}

但是当它被点击时,它什么也不做,并且返回0错误。我换掉了

代码语言:javascript
运行
复制
drawingMode: google.maps.drawing.OverlayType.MARKER;

使用

代码语言:javascript
运行
复制
alert("button was clicked ");

要查看它是否正在读取按钮,请单击它,然后它就可以工作了。那么应该添加什么来激活标记工具呢??

EN

回答 3

Stack Overflow用户

发布于 2015-03-05 04:02:52

这对我来说很有效(不需要jquery):

代码语言:javascript
运行
复制
document.getElementById('add-event-button').onclick = function() {
  drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
}

工作代码片段:

代码语言:javascript
运行
复制
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    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
      ]
    },
    markerOptions: {
      icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
  document.getElementById('add-event-button').onclick = function() {
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
  }
}

google.maps.event.addDomListener(window, 'load', initialize);
代码语言:javascript
运行
复制
html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
代码语言:javascript
运行
复制
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<button id="add-event-button" type="button" class="btn btn-success"><span class="glyphicon glyphicon-plus-sign"></span> Add Event</button>
<div id="map-canvas"></div>

票数 3
EN

Stack Overflow用户

发布于 2015-03-05 01:01:00

您可能需要通过drawingManager setOptions方法来执行此操作,例如:

代码语言:javascript
运行
复制
drawingManager.setOptions({
  drawingControlOptions: {
    drawingModes: [google.maps.drawing.OverlayType.MARKER]
  }
});

所以在你的例子中:

代码语言:javascript
运行
复制
document.getElementById('add-event-button').onclick = function()
{
        drawingManager.setOptions({
            drawingControlOptions: {
                drawingModes: [google.maps.drawing.OverlayType.MARKER]
            }
        });
}

票数 1
EN

Stack Overflow用户

发布于 2015-03-05 01:16:11

代码语言:javascript
运行
复制
$("#add-event-button").click( function(){
    drawingManager.setDrawingMode(google.maps.drawing.OverlayType.MARKER);
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28860132

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档