Question

现在我有一张谷歌地图放置了一张mapLabel，上面写着＆＃34;你好！＆＃34;用户点击的任何地方（并将其绑定到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

在点击的位置添加带有表单的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);
});

从表单中捕获数据并添加（在本例中）带有包含该文本的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>

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

1 个答案: