更新标记文字Google Maps API [英] Update marker text google maps API

问题描述

因此，我正在为我的网站使用Google Maps API，并且我希望标记文本等于另一个html元素的值.这里的任何人都知道如何在google maps API中更新标记的text属性的值吗?

So i am using the Google maps API for my website and I want the markers text to be equal to the value of another html element. Anyone here knows how to update the value of the text property of a marker in the google maps API?

这是我关于这个问题的代码.

Here is my code regarding the problem.

var map, marker;
var input = document.getElementById('inputField');
input.onkeyup = function() {
    //want to set the marker.text property to input.value and update the markers text
}

function myMap() {
    var long = 59.614503;
    var lat = 16.539939;

    var myLatlng = new google.maps.LatLng(lat, long);
    var mapProp = {
        center: new google.maps.LatLng(long, lat),
        zoom: 16,
        styles: [......]
    }
}
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

marker = new google.maps.Marker({
    position: new google.maps.LatLng(long, lat),
    label: {
        color: 'white',
        fontWeight: 'bold',
        fontSize: '10px',
        text: arena
    },
    optimized: false,
    visible: true,
    draggable: true,
});
marker.setMap(map);

推荐答案

获取现有的标签对象，将其text属性设置为所需的值，然后在标记上进行设置(除非您要更改其他格式).

Get the existing label object, set its text property to the desired value, then set it on the marker (unless you want to change other formatting).

input.onkeyup = function() {
  var label = marker.getLabel();
  label.text = input.value;
  marker.setLabel(label);
}

概念提琴证明

代码段:

var map, marker;

function initialize() {
  var input = document.getElementById('inputField');
  input.onkeyup = function() {
    var label = marker.getLabel();
    console.log(label);
    label.text = input.value;
    marker.setLabel(label);
  }

  function myMap() {
    var lat = 59.614503;
    var lng = 16.539939;
    var myLatlng = new google.maps.LatLng(lat, lng);
    var mapProp = {
      center: new google.maps.LatLng(lat, lng),
      zoom: 16
    }
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      label: {
        color: 'white',
        fontWeight: 'bold',
        fontSize: '10px',
        text: "arena"
      },
      optimized: false,
      visible: true,
      draggable: true,
    });
    marker.setMap(map);
  }
  myMap();
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="inputField" />
<div id="googleMap"></div>

这篇关于更新标记文字Google Maps API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！