如何根据文本框值获取纬度和经度

时间:2013-12-21 23:08:12

标签: javascript google-maps google-maps-api-3

如何根据文本框中插入的值获取纬度和经度。

为了在同一张地图中显示一些Pin。

文本框上的值将根据用户位置进行填充,以便在我的网站中输入的人员将在地图中显示是否要共享位置

当用户在文本框中指定要在地图中显示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>';
    } 

});

1 个答案:

答案 0 :(得分: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);