如何在谷歌地图API中添加文本标签

Question

我目前正在研究谷歌地图API，并让它工作。不幸的是，我遇到了一个小问题。我似乎找不到在标记旁边放置标签或文本的方法。 这是我的代码。我下载了一个javascript maplabel，但它似乎不起作用，或者我的表达方式可能有错误。

我还在学习Javascript和Google API，希望你能帮助我。

谢谢。

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel-compiled.js"></script>
<script>
var geocoder, map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(58.5452824, -92.4986259);
  var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeControl: false
    }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  codeAddress();
  }
  var icon = { 
    url: 'images/map_icon.png'
  };
  var mapLabel = new MapLabel({
    text: 'Test',
    position: new google.maps.LatLng(34.515233, -100.918565),
    map: map,
    fontSize: 35,
    align: 'right'
  });
function codeAddress() {
var address = "Address Test";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
address: address,
icon: icon,
position: results[0].geometry.location
      });
} 
else {
alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
jQuery(document).ready(function (){
    initialize();//run the map
});
</script>
<style type="text/css">
#map_canvas{
  width: 100%;
  height: 400px;
}
</style>
 <div id="map_canvas"></div>
 <div class="overlay-gray-banner">
    <div class="uk-container uk-container-center">
    <h1>Contact Us</h1>
    <p class="banner-short-desc">We are happy to hear from you. Please contact us through the form below and we will get back to you
      as soon as we can.</p>
    </div>
 </div>

Answer 1

代码的问题在于您在初始化函数之外创建地图标签，因此它是在定义地图之前创建的（初始化在页面加载时运行，在创建地图标签之后）。 将该代码移动到初始化函数内。

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(58.5452824, -92.4986259);
    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(34.515233, -100.918565), // latlng,
        mapTypeControl: false
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var mapLabel = new MapLabel({
        text: 'Test',
        position: new google.maps.LatLng(34.515233, -100.918565),
        map: map,
        fontSize: 35,
        align: 'right'
    });
    codeAddress();    
}

工作小提琴

工作代码片段：

var geocoder, map;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(58.5452824, -92.4986259);
    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(34.515233, -100.918565), // latlng,
        mapTypeControl: false
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    // codeAddress();
    var mapLabel = new MapLabel({
        text: 'Test',
        position: new google.maps.LatLng(34.515233, -100.918565),
        map: map,
        fontSize: 35,
        align: 'right'
    });
}
var icon = {
    url: 'images/map_icon.png'
};

function codeAddress() {
    var address = "Address Test";

    geocoder.geocode({
        'address': address
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                address: address,
                icon: icon,
                position: results[0].geometry.location
            });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

jQuery(document).ready(function () {
    initialize(); //run the map
});

#map_canvas {
    width: 100%;
    height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/geocodezip/v3-utility-library@master/archive/maplabel/src/maplabel.js"></script>
<div id="map_canvas"></div>
<div class="overlay-gray-banner">
    <div class="uk-container uk-container-center">
         <h1>Contact Us</h1>
        <p class="banner-short-desc">We are happy to hear from you. Please contact us through the form below and we will get back to you as soon as we can.</p>
    </div>
</div>