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

问题描述

我目前正在研究Google地图API并使其工作。不幸的是我有一个小问题。我似乎无法找到将标签或文字放在标记旁边的方法。这是我的代码。我下载了一个JavaScript maplabel，但它似乎不工作，或者我如何放错了。

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

谢谢。

< script src =http：// maps。 googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false\"></script><script type =text / javascriptsrc =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由于以下原因：+ status;}}）;} jQuery（document）.ready（function（）{initialize（）; //运行映射}）;< / script>< style type =text / css> #map_canvas {width：100％; height：400px;}< / style> < div id =map_canvas>< / div> < div class =overlay-grey-banner> < div class =uk-container uk-container-center> < h1>与我们联系< / h1> < p class =banner-short-desc>我们很高兴收到您的来信。请通过以下表单与我们联系，我们会尽快回复您。< / p> < / DIV> < / div>

解决方案

你的代码的问题在于你在初始化函数之外创建地图标签，所以它是在定义地图之前创建的（初始化在页面加载时运行，在地图标签创建之后运行）。

 函数初始化（）{
 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：地图，
 fontSize：35，
 align：'right'
}）; 
 
 codeAddress（）; 
} 
  

工作代码片段：

var geocoder，map;函数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'};函数codeAddress（）{var address =地址测试; 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由于以下原因不成功：+状态）;}}）;} jQuery（document）.ready（function（）{initialize（）; //运行地图}）;

  #map_canvas {width：100％; height：400px;}  

< script src =https ：< / script>< / script> 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-grey-banner> < div class =uk-container uk-container-center> < h1>与我们联系< / h1> < p class =banner-short-desc>我们很高兴收到您的来信。请通过以下表单与我们联系，我们会尽快回复您。< / p> < / div>< / div>

I am currently working on a Google map API and got it working. Unfortunately i had a little problem. I can't seem to find a way to put a label or text beside the marker. Here is my code. I downloaded a javascript maplabel but it seems not working or perhaps there is wrong on how i put it.

I am still learning Javascript and Google API, hopefully you can help me.

Thanks.

<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>

解决方案

The issue with your code is that you are creating the map label outside of the initialize function, so it is created before the map is defined (initialize runs on page load, after the map label is created). Move that code inside the initialize function.

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

working code snippet:

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>

这篇关于如何在Google Map API中添加文字标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！