獲得來自谷歌地圖的所有標記設置文本標籤

我有在設置使用 https://github.com/googlemaps/js-map-label 獲得來自谷歌地圖的所有標記設置文本標籤

設置標籤USNG庫中的文本標籤的麻煩做這樣的事情：

//var marker = ... 
var textLabel = new MapLabel({ 
    text: 'some text' 
    position: position, //google maps LatLng position 
    map: map, 
    fontSize: 35, 
    align: 'right' 
}); 

textLabel.set('position', position); 
marker.bindTo('map', textLabel); 
marker.bindTo('position', textLabel);

我用addGeoJson方法導入所有數據，我無法訪問標記。有什麼辦法可以解決這個問題嗎？

我需要爲顯示的每個標記設置一個文本。這裏是我目前的實施：

map.data.addGeoJson(response.data, {idPropertyName: "id"}); 

    map.data.setStyle(function(feature){ 
     var color = feature.getProperty('color'); 
     var zIndex = feature.getProperty('zIndex'); 

     if(feature.getGeometry().getType().toLowerCase() == "point"){ 
      return { 
       icon: globalOptions.textMarkerPath 
      } 
     }else{ 
      return { 
       fillColor: 'rgb(' + color + ')', 
       strokeColor: 'rgb(' + color + ')', 
       fillOpacity: 0.4, 
       strokeOpacity: 1, 
       strokeWeight: 1, 
       zIndex: zIndex 
      } 
     } 

    }); 

    map.data.forEach(function(feature){ 
     if(feature.getGeometry().getType().toLowerCase() == "point") { 
      var textLabel = new MapLabel({ 
       text: feature.getProperty("text"), 
       position: feature.position, 
       map: map, 
       fontSize: 35, 
       align: 'right' 
      }); 

      textLabel.set('position', feature.position); 
      feature.bindTo('map', textLabel); 
      feature.bindTo('position', textLabel); 
      feature.setProperty('textLabel', textLabel); 
     } 
    });

再次感謝。

編輯這裏是一個GeoJSON的響應（修剪一個）的例子：

{ 
    "viewable": true, 
    "data": { 
    "type": "FeatureCollection", 
    "features": [ 
     { 
     "type": "Feature", 
     "properties": { 
      "id": 11766, 
      "text": "", 
      "layer": "limitaimobil", 
      "color": "35,40,50", 
      "zIndex": 7, 
      "area": 448, 
      "is_associated": false 
     }, 
     "geometry": { 
      "type": "Polygon", 
      "coordinates": [ 
      [ 
       [ 
       26.1373083033642, 
       47.7787618059076 
       ], 
       [ 
       26.1371254511354, 
       47.778684435143 
       ], 
       [ 
       26.1370035662918, 
       47.7789188945034 
       ], 
       [ 
       26.1371962266472, 
       47.779000415299 
       ], 
       [ 
       26.1373083033642, 
       47.7787618059076 
       ] 
      ] 
      ] 
     } 
     }, 
     { 
     "type": "Feature", 
     "properties": { 
      "id": 12541, 
      "text": "2", 
      "layer": "limitaparcela", 
      "color": "51,153,255", 
      "zIndex": 48, 
      "area": 0, 
      "is_associated": false 
     }, 
     "geometry": { 
      "type": "Point", 
      "coordinates": [ 
      26.1372642328728, 
      47.7785316061887 
      ] 
     } 
     } 
    ] 
    } 
}

來源

2015-09-08 Victor Bojica

什麼是您的GeoJSON的樣子？請提供演示此問題的[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/mcve）（包括示例GeoJSON）。 – geocodezip

添加了一個geojson示例 –

你可以做的是您檢索標記是每次您將其添加到一個標記列表，這樣的話當你需要它們時，你可以使用id作爲標識符迭代列表並應用文本標籤。

編輯：

的是我是如何做的：

//Used to remember markers 
var markerStore = {}; 

//Time between marker refreshes 
var INTERVAL = 250; 

function getMarkers() { 
    $.ajax({ 
     type: 'GET', 
     url: 'webresources/mobile/retrieve-position', 
     contentType: 'application/json', 
     dataType: "json", //linea fragril 
     beforeSend: function (xhr) { 
      // Set the CSRF Token in the header for security 
      var token = window.sessionStorage.accessToken; 
       if (token) { 
       xhr.setRequestHeader('userToken', token); 
       } 
       else { 
       xhr.abort(); 
      } 
     }, 
     success: function (res, textStatus, jqXHR) { 
      if (jqXHR.status !== 204) { 
       for (var i = 0; i < res.length; i++) { 
        if (markerStore.hasOwnProperty(res[i].username)) { 
         //Check if marker is still alive 
         if(res[i].alive){ 

          Destroy the marker 
          markerStore[res[i].username].setMap(null); 

         } 
         else{ 
          Change markers position reading the new marker information. 
          markerStore[res[i].username].setPosition(new google.maps.LatLng(res[i].lat, res[i].long)); 
         } 
        } 
        else { 
         //If it doesnt exist, create a new one. 
         var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + res[i].color); 
         var marker = new google.maps.Marker({ 
          position: new google.maps.LatLng(res[i].lat, res[i].long), 
          title: res[i].username, 
          icon: pinImage, 
          map: map 
         }); 
         markerStore[res[i].username] = marker; 
         console.log(marker.getTitle()); 
        } 
       } 
       window.setTimeout(getMarkers, INTERVAL); 
      } 
     }, 
     error: function() { 

      console.log("Error loading markers."); 
     } 
    }); 
}

來源

2015-09-08 14:54:41

我這樣做會意味着拋棄整個geojson的東西，並解析它分離，而不是現在它如何工作。我仍然會將它作爲最後一次嘗試 –

feature沒有一個position屬性，你需要這樣做：

feature.getGeometry().get()

得到google.maps.LatLng與標記相關聯。

proof of concept fiddle

代碼片段：

var map; 
 
var globalOptions = {}; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    map.data.addGeoJson(geoJSON, { 
 
    idPropertyName: "id" 
 
    }); 
 

 
    map.data.setStyle(function(feature) { 
 
    var color = feature.getProperty('color'); 
 
    var zIndex = feature.getProperty('zIndex'); 
 

 
    if (feature.getGeometry().getType().toLowerCase() == "point") { 
 
     return { 
 
     icon: globalOptions.textMarkerPath 
 
     } 
 
    } else { 
 
     return { 
 
     fillColor: 'rgb(' + color + ')', 
 
     strokeColor: 'rgb(' + color + ')', 
 
     fillOpacity: 0.4, 
 
     strokeOpacity: 1, 
 
     strokeWeight: 1, 
 
     zIndex: zIndex 
 
     } 
 
    } 
 

 
    }); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var markerCnt = 0; 
 
    map.data.forEach(function(feature) { 
 
    if (feature.getGeometry().getType().toLowerCase() == "point") { 
 
     bounds.extend(feature.getGeometry().get()); 
 
     var textLabel = new MapLabel({ 
 
     text: feature.getProperty("text"), 
 
     position: feature.getGeometry().get(), 
 
     map: map, 
 
     fontSize: 35, 
 
     align: 'right' 
 
     }); 
 
     markerCnt++; 
 
     if (markerCnt > 1) { 
 
     map.fitBounds(bounds); 
 
     } else { 
 
     map.setCenter(feature.getGeometry().get()); 
 
     map.setZoom(6); 
 
     } 
 

 
     textLabel.set('position', feature.getGeometry().get()); 
 
     feature.bindTo('map', textLabel); 
 
     feature.bindTo('position', textLabel); 
 
     feature.setProperty('textLabel', textLabel); 
 
    } 
 
    }); 
 

 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 
var geoJSON = { 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
    "type": "Feature", 
 
    "properties": { 
 
     "id": 11766, 
 
     "text": "", 
 
     "layer": "limitaimobil", 
 
     "color": "35,40,50", 
 
     "zIndex": 7, 
 
     "area": 448, 
 
     "is_associated": false 
 
    }, 
 
    "geometry": { 
 
     "type": "Polygon", 
 
     "coordinates": [ 
 
     [ 
 
      [ 
 
      26.1373083033642, 
 
      47.7787618059076 
 
      ], 
 
      [ 
 
      26.1371254511354, 
 
      47.778684435143 
 
      ], 
 
      [ 
 
      26.1370035662918, 
 
      47.7789188945034 
 
      ], 
 
      [ 
 
      26.1371962266472, 
 
      47.779000415299 
 
      ], 
 
      [ 
 
      26.1373083033642, 
 
      47.7787618059076 
 
      ] 
 
     ] 
 
     ] 
 
    } 
 
    }, { 
 
    "type": "Feature", 
 
    "properties": { 
 
     "id": 12541, 
 
     "text": "2", 
 
     "layer": "limitaparcela", 
 
     "color": "51,153,255", 
 
     "zIndex": 48, 
 
     "area": 0, 
 
     "is_associated": false 
 
    }, 
 
    "geometry": { 
 
     "type": "Point", 
 
     "coordinates": [ 
 
     26.1372642328728, 
 
     47.7785316061887 
 
     ] 
 
    } 
 
    }] 
 
};

html, 
 
body, 
 
#map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<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" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

來源

2015-09-08 17:55:43 geocodezip

獲得來自谷歌地圖的所有標記設置文本標籤

回答

相關問題