如何從Nokia Maps API獲取十進制經度/緯度？

我有以下代碼時，我拖曳地圖，它的位置上的標記，其將更新與位置的緯度/經度的文本框：如何從Nokia Maps API獲取十進制經度/緯度？

var listener = function (evt) { 
    /* We check if this drag listener is called while the marker is being 
     * dragged using the default behavior component 
     */ 
    var mapDragType = evt.dataTransfer.getData("application/map-drag-type"); 

    if (mapDragType === "marker") { 
     // Get the marker itself. 
     var marker = evt.dataTransfer.getData("application/map-drag-object"); 

     // Get the offset of the mouse relative to the top-left corner of the marker. 
     var offset = evt.dataTransfer.getData("application/map-drag-object-offset"); 

     /* Calculate the current coordinate of the marker, so substract the offset from the 
      * current displayX/Y position to get the top-left position of the marker and then 
      * add the anchor to get the pixel position of the anchor of the marker and then 
      * query for the coordinate of that pixel position 
      */ 
     var coordinate = map.pixelToGeo(evt.displayX - offset.x + marker.anchor.x, evt.displayY - offset.y + marker.anchor.y); 

     // If the marker is dragged above a zone where it may not be dropped 
     if (evt.dataTransfer.dropEffect === "none") { 
      // If this is the end of the drag 
      if (evt.type === "dragend") { 
       // then the marker will jump back to where it was; 
       updateInputValue(marker, marker.coordinate.toString()); 
      } 
      else { 
       // otherwise it is currently (while being dragged) above an invalid drop zone 
       updateInputValue(marker, "Invalid drop zone!"); 
      } 
     } 
     else { 
      // If the marker is somewhere above the map, update info text with the new coordinate. 
       updateInputValue(marker, coordinate.toString()); 
     } 
    } 
}; 

/* Create a helper method that updates the text fields associated with the 
    * marker passed as argument 
    */ 
var updateInputValue = function (draggedMarker, text) { 
    if (draggedMarker === marker) 
     $("input[name*='txtGeoLocation']").val(text); 
    //markerPosUiElt.innerHTML = text; 
};

時遇到的問題是，緯度/經度當我需要它在十進制格式時以長格式輸出。

我試圖改變以下行：

updateInputValue(marker, marker.coordinate.toString());

以下幾點：

updateInputValue(marker, marker.coordinate.latitude.ToString() + ', ' + marker.coordinate.longitude.ToString());

但後來我的文本框停止填充（我想象中的錯誤拋出這是不冒泡向上）。我甚至試圖用下列方法檢索緯度：

updateInputValue(marker, marker.coordinate.latitude.ToString());

但我仍然沒有收到任何輸出。

我該如何做到這一點？我絕對不想要長格式的經度/緯度，只希望將這個十進制版本寫到我的文本框中。

來源

2013-05-01 Codingo

該標記的dragend活動期間只更新座標，所以如果你要跟蹤的中間位置，你就會有一個使用的拖動活動期間重新計算當前目標位置map.pixelToGeo()方法。可以引用移動標記作爲當前事件的目標即evt.target

的標記即的coordinate property返回格式化緯度/經度的evt.target.coordinate。
evt.target.coordinate.latitude和evt.target.coordinate.longitude給出十進制度數的座標。

下面是一個工作示例 - 您需要替換自己的app id and token才能使其正常工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=EmulateIE10;"/> 
     <base href="http://developer.here.com/apiexplorer/examples/api-for-js/events/map-object-events-displayed.html" /> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
     <title>Nokia Maps API for JavaScript Example: Map Object events</title> 
     <meta name="description" content="Adding event listeners to objects on the map"/> 
     <meta name="keywords" content="mapobjectevents, map, display, object, events"/> 
     <!-- For scaling content for mobile devices, setting the viewport to the width of the device--> 
     <meta name=viewport content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

     <!-- By default we add ?with=all to load every package available, it's better to change this parameter to your use case. Options ?with=maps|positioning|places|placesdata|directions|datarendering|all --> 
     <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.4/jsl.js?with=all"></script> 


    </head> 
    <body> 
     <div id="mapContainer" style="width:70%; height:70%; left:0; top:50; position: absolute;"></div> 
     <div id="uiContainer" style="left:0; top:0; position: absolute;" >HELLO</div> 
     <script type="text/javascript" id="exampleJsSource"> 
// <![CDATA[  
///////////////////////////////////////////////////////////////////////////////////// 
// Don't forget to set your API credentials 
// 
// Replace with your appId and token which you can obtain when you 
// register on http://api.developer.nokia.com/ 
// 
      nokia.Settings.set("appId", "YOUR APP ID GOES HERE"); 
      nokia.Settings.set("authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE"); 

///////////////////////////////////////////////////////////////////////////////////// 

// Get the DOM node to which we will append the map 
var mapContainer = document.getElementById("mapContainer"); 
// Create a map inside the map container DOM node 
var map = new nokia.maps.map.Display(mapContainer, { 
    // Initial center and zoom level of the map 
    center: [52.51, 13.4], 
    zoomLevel: 7, 
    // We add the behavior component to allow panning/zooming of the map 
    components:[new nokia.maps.map.component.Behavior()] 
}); 



// Create a default listener for events that will just log a message. 
var defaultHandler = function (evt) { 

    if (evt.target instanceof nokia.maps.map.Marker) { 

     //console.log(evt); 

     var div = document.getElementById("uiContainer"); 
     if (evt.type = "dragend"){ 
      div.innerHTML = evt.type + " Formated: " + evt.target.coordinate + " Decimal: " + evt.target.coordinate.latitude + ", " + evt.target.coordinate.longitude; 
     } 
     if (evt.type = "drag"){ 
      var coordinate = map.pixelToGeo(evt.displayX + evt.target.anchor.x, evt.displayY + evt.target.anchor.y); 
      div.innerHTML = evt.type + " Formated: " + coordinate + " Decimal: " + coordinate.latitude + ", " + coordinate.longitude; 
     } 
    } 

    if (evt.target instanceof nokia.maps.map.Spatial) { 
     /* Prevent other event listeners from being triggered 
     * For more details see nokia.maps.dom.Event 
     */ 
     evt.stopImmediatePropagation(); 
    } 
}; 

/* Adding event listeners one by one to a map object is not very 
* efficient therefore we have created a shortcut method 
* to add multiple eventlisteners to an object using the "eventListener" property 
*/ 

// Template with all listeners to be registered. 
var listeners = { 
    // type: [(listener, useCapture, namespaceURI)(, listener, useCapture, namespaceURI)(, ...)] 
    "dragstart": [defaultHandler, false, null], 
    "drag": [defaultHandler, false, null], 
    "dragend": [defaultHandler, false, null] 
}; 

// Create image marker object 
var imageMarker = new nokia.maps.map.Marker(
    [52.88745, 13.43246], 
    { 
     $name: "Image Marker", 
     eventListener: listeners, 
     icon: "../../res/markerHouse.png", 
     anchor: new nokia.maps.util.Point(35, 89), 
     draggable: true 
    } 
); 

// Add event listeners to the marker 
imageMarker.addListeners(listeners); 
map.objects.add(imageMarker); 


// ]]> 
     </script> 
    </body> 
</html>

來源

2013-05-02 07:46:05

如何從Nokia Maps API獲取十進制經度/緯度？

回答

相關問題