准确创建文本输入字段,用户点击Google地图

Question

现在我有一个谷歌地图放置一个mapLabel,上面写着"你好!" 用户点击的任何地方(并将其绑定到Lat/Long)

这很简单

google.maps.event.addListener(map, 'click', function(e) {
    placeLabel(e.latLng, map);
});

和

function placeLabel(position, map) {
    var mapLabel = new MapLabel({
      text: 'Hello!',
      position: position,
      map: map,
      fontSize: 12,
      align: 'right'
    });
}

我最终想要的是通过文本对话提示用户,以便他们可以让文本说出他们想要的任何内容,但是我对如何实现这一点感到茫然.

有什么建议？

Answer 1

1. 在点击的位置添加带有表单的infowindow

   var formStr = "<input type='text' id='text4mrkr' value='marker text' /><input type='button' value='submit' onclick='addPlace();' />"
   google.maps.event.addListener(map, 'click', function (e) {
       infowindow.setContent(formStr);
       infowindow.setPosition(e.latLng);
       infowindow.open(map);
   });
   

2. 从表单中捕获数据并添加(在本例中)带有包含该文本的infowindow的标记.

   function addPlace() {
       var marker = new google.maps.Marker({map:map, position: infowindow.getPosition()});
       marker.htmlContent = document.getElementById('text4mrkr').value;
       infowindow.close();
       google.maps.event.addListener(marker, 'click', function(evt) {
           infowindow.setContent(this.htmlContent);
           infowindow.open(map,marker);
       });
       google.maps.event.addListener(marker, 'rightclick', function() {
           this.setMap(null);
       });
   }
   

代码段:

var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var formStr = "<input type='text' id='text4mrkr' value='marker text' /><input type='button' value='submit' onclick='addPlace();' />"

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListener(map, 'click', function(e) {
    infowindow.setContent(formStr);
    infowindow.setPosition(e.latLng);
    infowindow.open(map);

    // placeLabel(e.latLng, map);
  });
}

function addPlace() {
  var marker = new google.maps.Marker({
    map: map,
    position: infowindow.getPosition()
  });
  marker.htmlContent = document.getElementById('text4mrkr').value;
  infowindow.close();
  google.maps.event.addListener(marker, 'click', function(evt) {
    infowindow.setContent(this.htmlContent);
    infowindow.open(map, marker);
  });
  google.maps.event.addListener(marker, 'rightclick', function() {
    this.setMap(null);
  });
}

function placeLabel(position, map) {
  var mapLabel = new MapLabel({
    text: 'Hello!',
    position: position,
    map: map,
    fontSize: 12,
    align: 'right'
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>