如何在Google Map API中添加文本标签

Question

我目前正在开发Google地图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

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

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();    
}

working fiddle

工作代码段：

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"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/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>