如何在 Google Map API 中添加文本标签 [英] How to add text label in Google Map API

问题描述

我目前正在研究 Google 地图 API 并使其正常工作.不幸的是我有一个小问题.我似乎找不到在标记旁边放置标签或文本的方法.这是我的代码.我下载了一个 javascript maplabel，但它似乎不起作用，或者我的放置方式有误.

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

谢谢.

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></脚本><script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel-compiled.js"></脚本><脚本>var 地理编码器，地图；函数初始化(){地理编码器 = 新的 google.maps.Geocoder();var latlng = new google.maps.LatLng(58.5452824, -92.4986259);var myOptions = {变焦:15，中心:latlng，地图类型控制:假}map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);代码地址()；}变量图标 = {网址:'图像/map_icon.png'};var mapLabel = new MapLabel({文本:'测试'，位置:新 google.maps.LatLng(34.515233, -100.918565),地图:地图，字体大小:35，对齐:'正确'});函数代码地址(){var address = "地址测试";geocoder.geocode({'地址':地址}，函数(结果，状态){如果(状态 == google.maps.GeocoderStatus.OK){map.setCenter(results[0].geometry.location);var 标记 = 新的 google.maps.Marker({地图:地图，地址:地址，图标:图标，位置:结果[0].geometry.location});}别的 {alert("地理编码失败，原因如下:" + status);}});}jQuery(文档).ready(函数(){initialize();//运行地图});<style type="text/css">#map_canvas{宽度:100%；高度:400px；}</风格><div id="map_canvas"></div><div class="overlay-gray-banner"><div class="uk-container uk-container-center"><h1>联系我们</h1><p class="banner-short-desc">我们很高兴收到您的来信.请通过下面的表格与我们联系，我们会尽快回复您我们尽快.</p>

解决方案

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

函数初始化(){地理编码器 = 新的 google.maps.Geocoder();var latlng = new google.maps.LatLng(58.5452824, -92.4986259);var myOptions = {变焦:15，中心:新 google.maps.LatLng(34.515233, -100.918565),//latlng,地图类型控制:假};map = new google.maps.Map(document.getElementById(map_canvas"), myOptions);var mapLabel = new MapLabel({文本:'测试'，位置:新 google.maps.LatLng(34.515233, -100.918565),地图:地图，字体大小:35，对齐:'正确'});代码地址()；}

工作小提琴

工作代码片段:

var geocoder, map;函数初始化(){地理编码器 = 新的 google.maps.Geocoder();var latlng = new google.maps.LatLng(58.5452824, -92.4986259);var myOptions = {变焦:15，中心:新 google.maps.LatLng(34.515233, -100.918565),//latlng,地图类型控制:假};map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);//代码地址();var mapLabel = new MapLabel({文本:'测试'，位置:新 google.maps.LatLng(34.515233, -100.918565),地图:地图，字体大小:35，对齐:'正确'});}变量图标 = {网址:'图像/map_icon.png'};函数代码地址(){var address = "地址测试";geocoder.geocode({地址":地址}，功能(结果，状态){如果(状态 == google.maps.GeocoderStatus.OK){map.setCenter(results[0].geometry.location);var 标记 = 新的 google.maps.Marker({地图:地图，地址:地址，图标:图标，位置:结果[0].geometry.location});} 别的 {alert("地理编码失败，原因如下:" + status);}});}jQuery(文档).ready(函数(){初始化();//运行地图});

#map_canvas {宽度:100%；高度: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>联系我们</h1><p class="banner-short-desc">我们很高兴收到您的来信.请通过下面的表格与我们联系，我们会尽快与您联系.</p>

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

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