0

我有以下代码，当我将地图上的标记拖到其位置时，它将更新带有位置纬度/经度的文本框：

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());

但我仍然没有收到任何输出。

我怎样才能做到这一点？我绝对不想要长格式的纬度/经度，只希望将十进制版本写到我的文本框中。

4

1 回答 1

1

标记的坐标仅在拖动事件期间更新，因此如果要跟踪中间位置，则必须在拖动事件期间使用该map.pixelToGeo()方法重新计算当前目标位置。您可以将移动标记引用为当前事件的目标，即 evt.target

  • evt.target.coordinateMarker即坐标属性返回格式化的纬度/经度。
  • 并以十进制度数evt.target.coordinate.latitude给出evt.target.coordinate.longitude坐标。

这是一个工作示例 - 您需要替换为您自己的应用程序 ID 和令牌才能使其正常工作。

<!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-02T07:46:05.180 回答