2011-08-29 108 views
0

Goog day!谷歌地图APi3:折线段没有出现在地图上

我有一个非常简单的谷歌地图的实现,它允许我的用户在地图画布的任何地方绘制多段线。

当重新开始时,折线段在地图上可见,折线存储在使用PHP的mySql数据库中。

//当编辑与折线的地图:

如果用户决定改变折线,我从数据库装载以前的折线,这是对用户可见。当他们点击按钮绘制多段线时,它将清除地图上的前一个多段线,并允许它们重新开始,但是,一旦它们开始在地图上点击,新的多段线段在地图上不可见,但是正确保存到数据库。

这里是我到目前为止已经完成:

var map; 
var polyline = null; 
var polylinePath = null; 

// HERE I INITIALIZE MY MAP ETC ETC ... 
// IN EDIT MODE I ALLOW THE FOLLOWING FUNCTION TO BE CALLED FIRST TO LOAD ANY EXISITNG POLYLINES FOR THE USER 
// THIS WORKS FINE, IT SHOWS THE PREVIOUS POLYLINE ON THE MAP. 
function loadBasePolylines($mapGuid) 
     { 
      var loadUrl = 'classes/Ajax_System.php'; 
      $.getJSON(loadUrl+"?action=loadMapPolylines&mapId="+mapGuid, function(json) { 
       if(json[0]['hasPolylines'] == 'yes'){ 

        var polylinesArray = []; 
        var prepath = polylinePath; 
        if(prepath){ 
         prepath.setMap(null); 
        } 
        var points = json[0].Points; 
        for (i=0; i<points.length; i++) { 
         polylinesArray.push(new google.maps.LatLng(points[i].lat,points[i].lon)); 
         bounds.extend(new google.maps.LatLng(points[i].lat,points[i].lon)); 
        } 
        polyline = new google.maps.Polyline({ 
         strokeColor: json[0]['lineColour'], 
         strokeOpacity: 0.5, 
         strokeWeight: json[0]['lineThickness'], 
         clickable: false, 
         path: polylinesArray 
        }); 

        polylinePath = polyline.getPath(); 
        polyline.setMap(map);       
        map.fitBounds(bounds); 
       } 
      }); 
     } 

// WHEN THE USER PRESS THE "DRAW PATH" BUTTON, THE FOLLOWING FUNCTION IN QUESTION IS CALLED: 
function startPolyline() 
     { 
      if(polyline != null){ 
       var answer = confirm("This will clear the current polyline from the map. Are you sure you want to continue?"); 
       if(answer){ 
        polyline.setMap(null); 
        if (tempMarkers) { 
         for (i in tempMarkers) { 
          tempMarkers[i].setMap(null); 
         } 
         tempMarkers.length = 0; 
        } 
       } else { 
        return; 
       } 
      } 
      var polyOptions = { 
       strokeColor: polylineColor, 
       strokeOpacity: polyLineOpacity, 
       strokeWeight: polyLineWidth, 
       clickable: false 
      } 
      polyline = new google.maps.Polyline(polyOptions); 
      polyline.setMap(map); 

      // Add a listener for the click event 
      google.maps.event.addListener(map, 'click', addPolylinePoint); 
     } 

     function addPolylinePoint(event) 
     { 
      var path = polyline.getPath(); 
      path.push(event.latLng); 
      var marker = new google.maps.Marker({ 
       position: event.latLng, 
       title: '#' + path.getLength(), 
       icon: '<?php echo URL; ?>public/mapIcons/mm_20_red.png', 
       map: map 
      }); 
      tempMarkers.push(marker); 
     } 

我试过到目前为止:

  1. 检查颜色代码是在正确的格式:是
  2. 检查纬度Lon order and values:是的

任何帮助将真诚地被赞赏。先谢谢你。

回答

1

哇,我已经解决了消失折线问题,通过我的问题重读。希望这将有助于有人出来第一天:

在我的代码,我从数据库中加载的折线:

function loadBasePolylines($mapGuid) 
    { 
. 
. 
. 

polyline = new google.maps.Polyline({ 
        strokeColor: json[0]['lineColour'], 
        strokeOpacity: 0.5, 
        strokeWeight: json[0]['lineThickness'], 
        clickable: false, 
        path: polylinesArray 
       }); 

} 

我的行程不透明度设置为0.5(等于50%)的权利......

然而,正当我在...

function startPolyline() 

var polyOptions = { 
      strokeColor: polylineColor, 
      strokeOpacity: polyLineOpacity, 
      strokeWeight: polyLineWidth, 
      clickable: false 
     } 

开始折线工具......我不透明度设置为所谓的polyLineOpacity未设定变量。

一旦我加入了全局变量和...

function loadBasePolylines($mapGuid) 
    { 
. 
. 
. 
strokeOpacity = json[0]['lineOpacity'] * 100; 

polyline = new google.maps.Polyline({ 
        strokeColor: json[0]['lineColour'], 
        strokeOpacity: strokeOpacity, 
        strokeWeight: json[0]['lineThickness'], 
        clickable: false, 
        path: polylinesArray 
       }); 

} 

应用的负载值...用正确的不透明度的折线再次显示正确!

我把这个开发者叫做脑冻结。 Tkx!

0

尝试重新开始在地图变量在startPolyline功能

map = new google.maps.Map(document.getElementById('id of your map')): 
+0

谢谢,但是,重新启动地图变量会返回灰色地图区域,并且不会听取点击事件。再次设置地图选项也无济于事。 – ALPHp