添加标签覆盖谷歌地图 [英] add label overlay Google Maps

查看：122
本文介绍了添加标签覆盖谷歌地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我成功添加infowindow 

 <！DOCTYPE html> 
< html lang =en> 
< head> 
< meta charset =UTF-8> 
< title> Google地图延迟加载< / title> 
< script src =// ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\"> ;</script> 
< script type =text / javascriptsrc =http：//localhost/label/label.js>< / script> 
 
< style> 
＃map-canvas {
 width：100％; 
 height：500px; 
位置：绝对; 
 top：0px; 
 left：0px; 
溢出：隐藏; 
} 
< / style> 
< / head> 
< body> 
 
< div id =map-canvas>< / div> 
< script type =text / javascript> 
 var map; 
函数setMarkers（数据）{
 console.log（'setMarkers'）; 
 console.log（data）; 
 var markerJson = JSON.parse（data）; 
 
 var pos; 
 var marker; 
 var allMarkers = []; 
 console.log（markerJson.length）; 
 for（var i = 0; i< markerJson.length; i ++）{
 pos = new google.maps.LatLng（markerJson [i] .latitude，markerJson [i] .longitude）; 
 marker = new google.maps.Marker（{
 position：pos，
 map：map，
 title：'Title'，
 icon：'https：/ /www.google.com/support/enterprise/static/geo/cdate/art/dots/red_dot.png'
 
}）; 
 
 
 /// INFO WINDOW // 
 marker ['infowindow'] = new google.maps.InfoWindow（{
 content：markerJson [i] .no_tiang 
}）; 
 
 var currentinfo = null; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 if（currentinfo）{currentinfo.close（）;} 
 this ['infowindow '] .open（map，this）; 
 currentinfo = this ['infowindow']; 
}）; 
 /// INFO WINDOW // 
 
 allMarkers.push（marker）; 
 
 
 
函数fetchMarkers（）{
 console.log（'fetchMarkers'）; 
 var loaded_markers =（$（'＃loaded_markers'）。val（）==''）？ 0：$（'＃loaded_markers'）。val（）; 
 var offset = $（'＃offset'）。val（）; 
 console.log（loaded_markers +' - '+ offset）; 
 $ .ajax（{
类型：GET，
 url：lazy_load_ajax.php，
 data：{
 start：loaded_markers，
 offset：offset 
}，
 success：function（data）{
 // var already_loaded = parseInt（loaded_markers）+ parseInt（offset）; 
 // $（'＃loaded_markers '）.val（already_loaded）; 
 setMarkers（data）; 
 setTimeout（function（）{
 // fetchMarkers（）; 
}，3000）; 
 } 
}）; 
 
 
函数初始化（）{
 console.log（'initialize'）; 
 //获取中心
 var map_center = new google.maps.LatLng（0.574853，123.048032）; 
 var mapOptions = {
 zoom：13，
 center：map_center，
 // mapTypeId：google.maps.MapTypeId.HYBRID，
 panControl：false，
 streetViewControl：false，
 mapTypeControl：false 
}; 
 //加载谷歌地图
 map = new google.maps.Map（document.getElementById（map-canvas），mapOptions）; 
 
 fetchMarkers（）; 
 
 
函数loadScript（）{
 var script = document.createElement（'script'）; 
 script.type ='text / javascript'; 
 script.src ='https://maps.googleapis.com/maps/api/js?v=3.exp&'+'callback = initialize'; 
 document.body.appendChild（script）; 
} 
 window.onload = loadScript; 
< / script> 
 
< / body> 
< / html>

现在我想添加标签，但出现错误，标记只显示1个标记



http：// img。 ctrlv.in/img/15/05/31/556aa5419dbed.jpg



我在代码infowindow之前添加代码标签

  /// LABEL /// 
 var label = new Label（{
 map：map 
}）; 
 label.bindTo（'position'，marker，'position'）; 
 label.bindTo（'text'，marker，'position'）; 
 
 /// LABEL /// 
 
 /// INFO WINDOW // 
 marker ['infowindow'] = new google.maps.InfoWindow（{
 content：markerJson [i] .no_tiang 
}）; 
 
 var currentinfo = null; 
 
 google.maps.event.addListener（marker，'click'，function（）{
 if（currentinfo）{currentinfo.close（）;} 
 this ['infowindow '] .open（map，this）; 
 currentinfo = this ['infowindow']; 
}）; 
 /// INFO WINDOW //

script label.js 

  //定义叠加层，从google.maps.OverlayView派生
函数Label（opt_options）{
 //初始化
 this.setValues（opt_options）; 
 
 //特定标签
 var span = this.span_ = document.createElement（'span'）; 
 span.style.cssText ='position：relative;剩下：-50％;顶部：-8px; '+ 
'空格：nowrap;边框：1px纯蓝色; '+ 
'padding：2px;背景颜色：白色'; 
 
 var div = this.div_ = document.createElement（'div'）; 
 div.appendChild（span）; 
 div.style.cssText ='position：absolute; display：none'; 
}; 
 Label.prototype = new google.maps.OverlayView; 
 
 //实现onAdd 
 Label.prototype.onAdd = function（）{
 var pane = this.getPanes（）。overlayLayer; 
 pane.appendChild（this.div_）; 
 
 //如果文本或位置发生更改，确保标签重新绘制。 
 var me = this; 
 this.listeners_ = [
 google.maps.event.addListener（this，'position_changed'，
 function（）{me.draw（）;}），
 google。 maps.event.addListener（this，'text_changed'，
 function（）{me.draw（）;}）
]; 
}; 
 
 //实现onRemove 
 Label.prototype.onRemove = function（）{
 this.div_.parentNode.removeChild（this.div_）; 
 
 //将标签从地图上移除，停止更新其位置/文本。 
 for（var i = 0，I = this.listeners_.length; i< I; ++ i）{
 google.maps.event.removeListener（this.listeners_ [i]）; 
} 
}; 
 
 //实现draw 
 Label.prototype.draw = function（）{
 var projection = this.getProjection（）; 
 var position = projection.fromLatLngToDivPixel（this.get（'position'））; 
 
 var div = this.div_; 
 div.style.left = position.x +'px'; 
 div.style.top = position.y +'px'; 
 div.style.display ='block'; 
 
 this.span_.innerHTML = this.get（'text'）。toString（）; 
};

我从这里获得了添加标签的脚本 http://blog.mridey.com/2009/09/label-overlay-example-for-google- maps.html

解决方案

标签 javascript取决于您正在动态加载的Google Maps JavaScript API v3。您需要在加载Google Maps JavaScript API之后加载label.js 。最简单的解决方法是不动态加载它。



工作小提琴



代码段：

var map; // 0.574853，123.048032var数据='[{id：1，纬度：0.57，经度：123.04，no_tiang：用于＃1的东西}，{id：2， latitude：0.56，longitude：123.045，no_tiang：用于＃2的东西}]';函数setMarkers（data）{console.log（'setMarkers'）;的console.log（数据）; var markerJson = JSON.parse（data）; var pos; var marker; var allMarkers = [];的console.log（markerJson.length）; for（var i = 0; i< markerJson.length; i ++）{pos = new google.maps.LatLng（markerJson [i] .latitude，markerJson [i] .longitude）; marker = new google.maps.Marker（{position：pos，map：map，title：'Title'，icon：'https://www.google.com/support/enterprise/static/geo/cdate/art/dots /red_dot.png'}）; ///标签/// var label = new Label（{map：map，text：marker.getPosition（）。toUrlValue（6）}）; label.bindTo（'position'，marker，'position'）; // label.bindTo（'text'，marker，'position'）; /// LABEL /// /// INFO WINDOW // marker ['infowindow'] = new google.maps.InfoWindow（{content：markerJson [i] .no_tiang}）; var currentinfo = null; google.maps.event.addListener（marker，'click'，function（）{if（currentinfo）{currentinfo.close（）;} this ['infowindow']。open（map，this）; currentinfo = this ['infowindow '];}）; /// INFO WINDOW // allMarkers.push（marker）; }} function fetchMarkers（）{console.log（'fetchMarkers'）; var loaded_markers =（$（'＃loaded_markers'）。val（）==''）？ 0：$（'＃loaded_markers'）。val（）; var offset = $（'＃offset'）。val（）; console.log（loaded_markers +' - '+ offset）; / * $ .ajax（{type：GET，url：lazy_load_ajax.php，data：{start：loaded_markers，offset：offset}，success：function（data）{// var already_loaded = parseInt（loaded_markers）+ parseInt（offset）; // $（'＃loaded_markers'）.val（already_loaded）; setMarkers（data）; setTimeout（function（）{// fetchMarkers（）;}，3000）;}}）; * / setMarkers（data）;} function initialize（）{console.log（'initialize'）; // Get center var map_center = new google.maps.LatLng（0.574853，123.048032）; var mapOptions = {zoom：13，center：map_center，// mapTypeId：google.maps.MapTypeId.HYBRID，panControl：false，streetViewControl：false，mapTypeControl：false}; //载入google地图map = new google.maps.Map（document.getElementById（map-canvas），mapOptions）; fetchMarkers（）;} google.maps.event.addDomListener（window，'load'，initialize）; //定义覆盖层，从google.maps.OverlayViewfunction派生出标签（opt_options）{//初始化this.setValues（opt_options）; //标签特定var span = this.span_ = document.createElement（'span'）; span.style.cssText ='position：relative;剩下：-50％;顶部：-8px; '+'空格：nowrap;边框：1px纯蓝色; '+'padding：2px;背景颜色：白色'; var div = this.div_ = document.createElement（'div'）; div.appendChild（跨度）; div.style.cssText ='position：absolute; display：none';}; Label.prototype = new google.maps.OverlayView; //实现onAddLabel.prototype.onAdd = function（）{var pane = this.getPanes（）。overlayLayer; pane.appendChild（this.div_）; //如果文本或位置发生更改，则确保标签重新绘制。 var me = this; this.listeners_ = [google.maps.event.addListener（this，'position_changed'，function（）{me.draw（）;}），google.maps.event.addListener（this，'text_changed'，function（）{ me.draw（）;}）];}; //实现onRemoveLabel.prototype.onRemove = function（）{this.div_.parentNode.removeChild（this.div_）; //标签从地图上移除，停止更新其位置/文本。 for（var i = 0，I = this.listeners_.length; i< I; ++ i）{google.maps.event.removeListener（this.listeners_ [i]）; }}; //实现drawLabel.prototype.draw = function（）{var projection = this.getProjection（）; var position = projection.fromLatLngToDivPixel（this.get（'position'））; var div = this.div_; div.style.left = position.x +'px'; div.style.top = position.y +'px'; div.style.display ='block'; this.span_.innerHTML = this.get（'text'）。toString（）;}; 

 ＃map-canvas {width：100％;身高：500px;位置：绝对; top：0px; left：0px; overflow：hidden;}  < script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><script src =https://maps.googleapis.com/ maps / api / js>< / script>< div id =map-canvas>< / div>


I'm success add infowindow

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Google Map Lazy Load</title>    
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://localhost/label/label.js"></script>

        <style>
            #map-canvas{
                width:100%;
                height:500px; 
                position: "absolute"; 
                top: 0px; 
                left: 0px; 
                overflow: "hidden";
            }
        </style>
    </head>
    <body>

        <div id="map-canvas"></div>        
        <script type="text/javascript">
            var map;
            function setMarkers(data) {
                console.log('setMarkers');
                console.log(data);
                var markerJson = JSON.parse(data);

                var pos;
                var marker;
                var allMarkers = [];
                console.log(markerJson.length);
                for (var i = 0; i < markerJson.length; i++) {                    
                    pos = new google.maps.LatLng(markerJson[i].latitude, markerJson[i].longitude);
                    marker = new google.maps.Marker({
                        position: pos,
                        map: map,
                        title: 'Title',
                        icon:'https://www.google.com/support/enterprise/static/geo/cdate/art/dots/red_dot.png'

                    });


                    /// INFO WINDOW //
                    marker['infowindow'] = new google.maps.InfoWindow({
                            content: markerJson[i].no_tiang
                        });

                    var currentinfo = null;

                    google.maps.event.addListener(marker, 'click', function() {
                        if(currentinfo) { currentinfo.close();}
                        this['infowindow'].open(map, this);
                        currentinfo = this['infowindow'];
                    });
                    /// INFO WINDOW //

                    allMarkers.push(marker);
                }
            }

            function fetchMarkers() {
                console.log('fetchMarkers');
                var loaded_markers = ($('#loaded_markers').val() =='') ? 0 : $('#loaded_markers').val();
                var offset = $('#offset').val();
                console.log(loaded_markers + ' - '+ offset);
                $.ajax({
                    type: "GET",
                    url: "lazy_load_ajax.php",
                    data: {
                        start: loaded_markers,
                        offset: offset
                    },                    
                    success: function(data) {
                        //var already_loaded = parseInt(loaded_markers) + parseInt(offset);
                       // $('#loaded_markers').val(already_loaded);
                        setMarkers(data);
                        setTimeout(function(){
                           // fetchMarkers();
                        }, 3000);
                    }
                });
            }

            function initialize() {
                console.log('initialize');
                // Get center
                var map_center = new google.maps.LatLng(0.574853, 123.048032);
                var mapOptions = {
                    zoom: 13,
                    center: map_center,
                    //mapTypeId: google.maps.MapTypeId.HYBRID,
                    panControl: false,
                    streetViewControl: false,
                    mapTypeControl: false
                };
                // Load google map
                map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                fetchMarkers();
            }

            function loadScript() {                
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=initialize';
                document.body.appendChild(script);
            }
            window.onload = loadScript;
        </script>

    </body>
</html>

and now I want add label but I got error and the marker just showing 1 marker

http://img.ctrlv.in/img/15/05/31/556aa5419dbed.jpg

I add code label before code infowindow

/// LABEL ///
                    var label = new Label({
                       map: map
                     });
                     label.bindTo('position', marker, 'position');
                     label.bindTo('text', marker, 'position');

                     /// LABEL ///

                    /// INFO WINDOW //
                    marker['infowindow'] = new google.maps.InfoWindow({
                            content: markerJson[i].no_tiang
                        });

                    var currentinfo = null;

                    google.maps.event.addListener(marker, 'click', function() {
                        if(currentinfo) { currentinfo.close();}
                        this['infowindow'].open(map, this);
                        currentinfo = this['infowindow'];
                    });
                    /// INFO WINDOW //

script label.js

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
 // Initialization
 this.setValues(opt_options);

 // Label specific
 var span = this.span_ = document.createElement('span');
 span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
                      'white-space: nowrap; border: 1px solid blue; ' +
                      'padding: 2px; background-color: white';

 var div = this.div_ = document.createElement('div');
 div.appendChild(span);
 div.style.cssText = 'position: absolute; display: none';
};
Label.prototype = new google.maps.OverlayView;

// Implement onAdd
Label.prototype.onAdd = function() {
 var pane = this.getPanes().overlayLayer;
 pane.appendChild(this.div_);

 // Ensures the label is redrawn if the text or position is changed.
 var me = this;
 this.listeners_ = [
   google.maps.event.addListener(this, 'position_changed',
       function() { me.draw(); }),
   google.maps.event.addListener(this, 'text_changed',
       function() { me.draw(); })
 ];
};

// Implement onRemove
Label.prototype.onRemove = function() {
 this.div_.parentNode.removeChild(this.div_);

 // Label is removed from the map, stop updating its position/text.
 for (var i = 0, I = this.listeners_.length; i < I; ++i) {
   google.maps.event.removeListener(this.listeners_[i]);
 }
};

// Implement draw
Label.prototype.draw = function() {
 var projection = this.getProjection();
 var position = projection.fromLatLngToDivPixel(this.get('position'));

 var div = this.div_;
 div.style.left = position.x + 'px';
 div.style.top = position.y + 'px';
 div.style.display = 'block';

 this.span_.innerHTML = this.get('text').toString();
};

I got script for add label from here http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html

解决方案

The Label javascript depends on the Google Maps Javascript API v3 which you are loading dynamically. You need to load label.js after the Google Maps Javascript API is loaded. The simplest fix is to not load it dynamically.

working fiddle

code snippet:

var map;
//0.574853, 123.048032
var data = '[{"id":"1","latitude":"0.57","longitude":"123.04","no_tiang":"stuff for #1"},{"id":"2","latitude":"0.56","longitude":"123.045", "no_tiang":"stuff for #2"}]';

function setMarkers(data) {
  console.log('setMarkers');
  console.log(data);
  var markerJson = JSON.parse(data);

  var pos;
  var marker;
  var allMarkers = [];
  console.log(markerJson.length);
  for (var i = 0; i < markerJson.length; i++) {
    pos = new google.maps.LatLng(markerJson[i].latitude, markerJson[i].longitude);
    marker = new google.maps.Marker({
      position: pos,
      map: map,
      title: 'Title',
      icon: 'https://www.google.com/support/enterprise/static/geo/cdate/art/dots/red_dot.png'

    });

    /// LABEL ///
    var label = new Label({
      map: map,
      text: marker.getPosition().toUrlValue(6)
    });
    label.bindTo('position', marker, 'position');
    // label.bindTo('text', marker, 'position');

    /// LABEL ///

    /// INFO WINDOW //
    marker['infowindow'] = new google.maps.InfoWindow({
      content: markerJson[i].no_tiang
    });

    var currentinfo = null;

    google.maps.event.addListener(marker, 'click', function() {
      if (currentinfo) {
        currentinfo.close();
      }
      this['infowindow'].open(map, this);
      currentinfo = this['infowindow'];
    });
    /// INFO WINDOW //

    allMarkers.push(marker);
  }
}

function fetchMarkers() {
  console.log('fetchMarkers');
  var loaded_markers = ($('#loaded_markers').val() == '') ? 0 : $('#loaded_markers').val();
  var offset = $('#offset').val();
  console.log(loaded_markers + ' - ' + offset);
  /* $.ajax({
                  type: "GET",
                  url: "lazy_load_ajax.php",
                  data: {
                      start: loaded_markers,
                      offset: offset
                  },                    
                  success: function(data) {
                      //var already_loaded = parseInt(loaded_markers) + parseInt(offset);
                     // $('#loaded_markers').val(already_loaded);
                      setMarkers(data);
                      setTimeout(function(){
                         // fetchMarkers();
                      }, 3000);
                  }
              }); */
  setMarkers(data);
}

function initialize() {
  console.log('initialize');
  // Get center
  var map_center = new google.maps.LatLng(0.574853, 123.048032);
  var mapOptions = {
    zoom: 13,
    center: map_center,
    //mapTypeId: google.maps.MapTypeId.HYBRID,
    panControl: false,
    streetViewControl: false,
    mapTypeControl: false
  };
  // Load google map
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  fetchMarkers();
}

google.maps.event.addDomListener(window, 'load', initialize);

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
  // Initialization
  this.setValues(opt_options);

  // Label specific
  var span = this.span_ = document.createElement('span');
  span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
    'white-space: nowrap; border: 1px solid blue; ' +
    'padding: 2px; background-color: white';

  var div = this.div_ = document.createElement('div');
  div.appendChild(span);
  div.style.cssText = 'position: absolute; display: none';
};
Label.prototype = new google.maps.OverlayView;

// Implement onAdd
Label.prototype.onAdd = function() {
  var pane = this.getPanes().overlayLayer;
  pane.appendChild(this.div_);

  // Ensures the label is redrawn if the text or position is changed.
  var me = this;
  this.listeners_ = [
    google.maps.event.addListener(this, 'position_changed',
      function() {
        me.draw();
      }),
    google.maps.event.addListener(this, 'text_changed',
      function() {
        me.draw();
      })
  ];
};

// Implement onRemove
Label.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);

  // Label is removed from the map, stop updating its position/text.
  for (var i = 0, I = this.listeners_.length; i < I; ++i) {
    google.maps.event.removeListener(this.listeners_[i]);
  }
};

// Implement draw
Label.prototype.draw = function() {
  var projection = this.getProjection();
  var position = projection.fromLatLngToDivPixel(this.get('position'));

  var div = this.div_;
  div.style.left = position.x + 'px';
  div.style.top = position.y + 'px';
  div.style.display = 'block';

  this.span_.innerHTML = this.get('text').toString();
};

#map-canvas {
  width: 100%;
  height: 500px;
  position: "absolute";
  top: 0px;
  left: 0px;
  overflow: "hidden";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

这篇关于添加标签覆盖谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆