Google Maps API v3：将用户输入坐标转换为latlng？ [英] Google Maps API v3: Turning user input coordinates to latlng?
问题描述
我是Google地图新手。
我正在尝试打开用户输入的坐标，将我在地图上的标记移动到这些坐标。例如，如果用户输入50.75,74.1，则标记将平移到该坐标。不幸的是，我无法让它工作。这里是我的函数：
pre $ function moveMarker（）{
var Markerloc = document.getElementById（Markerloc）。value ;
var newLatlng = new google.maps.LatLng（Markerloc）;
marker.setPosition（newLatLng）
}
这是我的HTML代码：
< input type =textid =Markerlocvalue =粘贴坐标/>
< input type =buttononclick =moveMarker（）value =更新标记>
编辑：我认为它会解决它，但不知何故，它仍然不起作用。 / p>
以下是我的代码：
< script type =text /的javascript>
var map;
var zoomLevel;
函数initialize（）{
var myLatlng = new google.maps.LatLng（40.65，-74）;
var myOptions = {
zoom：2，
center：myLatlng，
mapTypeId：google.maps.MapTypeId.ROADMAP，
}
var map = new google.maps.Map（document.getElementById（'map_canvas'），myOptions）;
var zoomLevel = map.getZoom（）;
var marker = new google.maps.Marker（{
position：myLatlng，
map：map，
draggable：true
}）;
//更新当前位置信息。
updateMarkerPosition（myLatlng）;
//添加拖动事件侦听器。
google.maps.event.addListener（marker，'dragstart'，function（）{
updateMarkerAddress（'Dragging ...'）;
}）;
google.maps.event.addListener（map，'zoom_changed'，function（）{
updateZoomLevel（map.getZoom（））;
}）;
google.maps.event.addListener（marker，'drag'，function（）{
updateMarkerStatus（'Dragging ...'）;
updateMarkerPosition（marker.getPosition（ ））;
}）;
google.maps.event.addListener（marker，'dragend'，function（）{
updateMarkerStatus（'Drag ended'）;
geocodePosition（marker.getPosition（）） ;
}）;
};
var geocoder = new google.maps.Geocoder（）;
函数geocodePosition（pos）{
geocoder.geocode（{
latLng：pos
}，function（responses）{
if（responses& &; respond.length> 0）{
updateMarkerAddress（responses [0] .formatted_address）;
} else {
updateMarkerAddress（'Can not determine address at this location。'）;
}
}）;
}
function updateZoomLevel（zoomLevel）{
document.getElementById（'zoomLevel'）。innerHTML = zoomLevel;
函数updateMarkerStatus（str）{
document.getElementById（'markerStatus'）。innerHTML = str;
}
函数updateMarkerPosition（myLatlng）{
document.getElementById（'info'）。innerHTML = [
myLatlng.lat（），
myLatlng .lng（）
] .join（'，'）;
}
函数updateMarkerAddress（str）{
document.getElementById（'address'）。innerHTML = str;
函数moveMarker（）{
var lat = parseFloat（document.getElementById（'markerLat'）.value）;
var lng = parseFloat（document.getElementById（'markerLng'）。value）;
var newLatLng = new google.maps.LatLng（lat，lng）;
marker.setPosition（newLatLng）
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< b>缩放级别：< / b>< div id =zoomLevel>滚动鼠标滚轮< / div>
< / div>
< input type ='text'id ='markerLat'value ='Target Latitude'/>
< input type ='text'id ='markerLng'value ='目标经度'/>
< input type =buttononclick =moveMarker（）value =移动标记>
< / body>
< / html>
这里是 JSFiddle Demo：
更新：
它不起作用的原因是因为在initialize函数的范围内有变量标记，因此moveMarker无法访问 var marker 。所以，我继续前进，通过在全部函数之外声明它将标记移动到全局范围，这样moveMarker就可以访问和移动标记的位置。通过这样做，您必须在初始化函数中删除 var 声明。
marker = new google.maps.Marker（{
position：myLatlng，
map：map，
draggable：true
}）;
记住修改过的代码只会移动标记的位置，但不会根据标记。您必须调用 map.setCenter（）; 来放置地图。
您需要解析数字分开并将其设置为使用 parseFloat（）键入Number。 google.maps.LatLng（）需要两个Number参数为Lat和Lng。更好的方法是创建两个文本框。
< input type ='text'id ='markerLat'value =''/>
< input type ='text'id ='markerLng'value =''/>
一个用于lat，另一个用于lng，并用
var lat = parseFloat（document.getElementById（'markerLat'）.value）;
和
var lng = parseFloat（document.getElementById（'markerLng'）。value）;
您可以通过执行
来创建和设置标记
var newLatLng = new google.maps.LatLng（lat，lng）;
marker.setPosition（newLatLng）;
I'm new with Google Maps. I'm trying to turn coordinates a user inputs to move a marker I have on my map to those coordinates. For instance, if the user inputs 50.75, 74.1 the marker will pan to that coordinate. Unfortunately, I couldn't get it to work. Here's my function:
function moveMarker() {
var Markerloc = document.getElementById("Markerloc").value;
var newLatlng = new google.maps.LatLng(Markerloc);
marker.setPosition(newLatLng)
}
Here's my HTML code:
<input type="text" id= "Markerloc" value="Paste your coordinates" />
<input type="button" onclick="moveMarker()" value="Update Marker">
EDIT: I thought that'd fix it, but somehow, it still doesn't work.
Here's my code:
<script type="text/javascript">
var map;
var zoomLevel;
function initialize(){
var myLatlng = new google.maps.LatLng(40.65, -74);
var myOptions = {
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var zoomLevel = map.getZoom();
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(myLatlng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener (map, 'zoom_changed', function() {
updateZoomLevel(map.getZoom());
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
};
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateZoomLevel(zoomLevel){
document.getElementById('zoomLevel').innerHTML = zoomLevel;
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(myLatlng) {
document.getElementById('info').innerHTML = [
myLatlng.lat(),
myLatlng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function moveMarker() {
var lat = parseFloat(document.getElementById('markerLat').value);
var lng = parseFloat(document.getElementById('markerLng').value);
var newLatLng = new google.maps.LatLng(lat, lng);
marker.setPosition(newLatLng)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width: 29%; height: 50%; float: left; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
<b>Zoom level: </b><div id="zoomLevel"> Scroll mousewheel</div>
</div>
<input type='text' id='markerLat' value='Target Latitude' />
<input type='text' id='markerLng' value='Target Longitude' />
<input type="button" onclick="moveMarker()" value="Move Marker">
</body>
</html>
Here is the JSFiddle Demo:
UPDATE:
The reason it wasn't working is because you have variable marker within the scope of initialize function and thus, moveMarker was not able to access the var marker. So, i went ahead and move the marker to the global scope by declaring it outside of all functions, and that way moveMarker can access and move the location of the marker. By doing so you'll have to drop the var declaration for the marker inside of initialization function.
marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true
});
Keep in mind the modified code would only move the marker's position but would not center the map based on the marker. You'll have to call map.setCenter(); to center the map.
You need to parse out the numbers seperately and set it to type Number using parseFloat(). google.maps.LatLng() takes two Number parameters for Lat and Lng. A better way of doing this is to create two textfields.
<input type='text' id='markerLat' value='' />
<input type='text' id='markerLng' value='' />
One for lat and another for lng, and retrive the value with
var lat = parseFloat(document.getElementById('markerLat').value);
and
var lng = parseFloat(document.getElementById('markerLng').value);
You can create and set the marker by doing
var newLatLng = new google.maps.LatLng(lat, lng);
marker.setPosition(newLatLng);
这篇关于Google Maps API v3：将用户输入坐标转换为latlng？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
