如何基於“文本框”值獲取緯度和經度

Question

如何獲取緯度和經度，具體取決於在文本框中插入的值。

為了在同一張地圖上顯示一些Pin。

文本框上的值將根據用戶位置進行填充，因此，如果他想共享位置，則在我的網站中輸入內容的人將顯示在地圖上

我希望當用戶在要在地圖中顯示該圖釘的文本框中指定緯度和經度時。 目前，以下腳本現在無法使用。 沒有從文本框中獲取值。

價值緯度：

<input type="text" name="val-lat" value="User Latitude" />

值經度：

<input type="text" name="val-lng" value="User Longitude" />

我使用以下腳本：

$(document).ready(function() {

    //------- Google Maps ---------//

    // Creating a LatLng object containing the coordinate for the center of the map
    var latlng = new google.maps.LatLng('val-lat', 'val-lng');

    // Creating an object literal containing the properties we want to pass to the map  
    var options = {  
        zoom: 15, // This number can be set to define the initial zoom level of the map
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN
    };  
    // Calling the constructor, thereby initializing the map  
    var map = new google.maps.Map(document.getElementById('map_div'), options);  

    // Define Marker properties
    var image = new google.maps.MarkerImage('images/marker.png',
        // This marker is 129 pixels wide by 42 pixels tall.
        new google.maps.Size(129, 42),
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 18,42.
        new google.maps.Point(18, 42)
    );

    // Add Marker
    var marker1 = new google.maps.Marker({
        position: new google.maps.LatLng('val-lat', 'val-lng'), 
        map: map,       
        icon: image // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin
    }); 

    // Add listener for a click on the pin
    google.maps.event.addListener(marker1, 'click', function() {  
        infowindow1.open(map, marker1);  
    });

    // Add information window
    var infowindow1 = new google.maps.InfoWindow({  
        content:  createInfo('Evoluted New Media', 'Ground Floor,<br />35 Lambert Street,<br />Sheffield,<br />South Yorkshire,<br />S3 7BH<br /><a href="http://www.evoluted.net" title="Click to view our website">Our Website</a>')
    }); 

    // Create information window
    function createInfo(title, content) {
        return '<div class="infowindow"><strong>'+ title +'</strong><br />'+content+'</div>';
    } 

});

Answer 1

這里的問題是您沒有獲得輸入值。 嘗試這個：

<input id="userLat" type="text" name="val-lat" value="User Latitude" />
<input id="userLng" type="text" name="val-lng" value="User Longitude" />

然后

var lat = document.getElementById('userLat').value;
var lng = document.getElementById('userLng').value;

var latlng = new google.maps.LatLng(lat, lng);