javascript - 继续在谷歌地图v3中绘制折线

标签 javascript google-maps google-maps-api-3 google-maps-drawing

是否可以使用 Google 的 DrawingManager 为现有折线打开绘图模式?

这可能在Google Maps web app中当进入自定义 map 编辑器时(菜单中的“我的 map ”->“创建 map ”->“绘制”)。然后创建一条折线,右键单击最后一个点并选择延长线(见下图)。

但我找不到用 google map api v3 执行相同操作的方法。

Google Maps - My Map

最佳答案

将折线的editable选项设置为true并将点添加到折线路径

示例:

  • 点击该行可以编辑该行
  • 点击 map 停止编辑
  • 在延长线的同时右键单击顶点将停止编辑

function initMap() {
  var goo   = google.maps,
      map   = new goo.Map(document.getElementById('map'), {}),
      line  = new goo.Polyline({
                path: [
                        {lat: 37.772, lng: -122.214},
                        {lat: 21.291, lng: -157.821},
                        {lat: -18.142, lng: 178.431},
                        {lat: -27.467, lng: 153.027}
                      ]}),
      bounds  = new goo.LatLngBounds();
      
      
      line.getPath().getArray().forEach(function(ll){
         bounds.extend(ll);
      });
      map.fitBounds(bounds);
  

      line.setMap(map);
  
  
  /**
    *  click on the line makes the line editable
    *  
    *  click on the map stops editing
    *  
    *  rightclick on the vertex while extending the line stops editing
    *                      
    **/      
  goo.event.addListener(line,'click',function(e){
    
    var line=this;
    
    //make the line editable
    this.setEditable(true);
    
    //stopediting on map-click
    goo.event.addListenerOnce(this.getMap(),'click',function(){
      line.setEditable(false);
    });
    //when a vertex has been clicked
    if(typeof e.vertex==='number'){
      
      //when the first or last vertex has been clicked
      if(!e.vertex ||e.vertex===this.getPath().getLength()-1){
        
        
        //when the first vertex has been clicked reverse the path to
        //be able do push a vertex
        if(e.vertex===0){
          var p=this.getPath().getArray();
          p.reverse();
          this.setPath(p);
        }
        
        //push a vertex 
        this.getPath().push(e.latLng)
        
        //observe the mousemove of the map to set the latLng of the last vertex
        var move=goo.event.addListener(this.getMap(),'mousemove',function(e){
           line.getPath().setAt(line.getPath().getLength()-1,e.latLng) 
        });
        
        //stop editing on rightclick
        goo.event.addListenerOnce(this,'rightclick',function(){
          goo.event.removeListener(move);
          this.setEditable(false);
        });
       } 
    }
  });
}
html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
<script async defer
        src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap"></script>
<div id="map"></div>

关于javascript - 继续在谷歌地图v3中绘制折线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35377537/

相关文章:

javascript - Google map API v3 上缺少 KML 标记 : What's wrong?

javascript - 将输入框中的值乘以表中的固定值 (HTML)

javascript - jQuery UI sortable 在排序时触发 css3 动画

javascript - IE 9 还能像旧版 IE 和 Netscape/Firefox 一样使用 Javascript 签名吗?

javascript - 2个邮政编码之间的距离

php - 谷歌地图 : is a lat/lng within a polygon?

php - 基本 AJAX 请求 Javascript/PHP 不工作

google-maps - 如何在 Google 我的 map 中更改道路颜色

javascript - 谷歌地图javascript api长按行为被缩放捏破坏

javascript - 是否可以修改 Google Maps V3 中的缩放过渡?