javascript - 谷歌地图 API v3 : Turning user input coordinates to latlng?-6ren

javascript - 谷歌地图 API v3 : Turning user input coordinates to latlng?

转载作者：搜寻专家更新时间：2023-10-31 08:12:27

25

4

我是 Google map 的新手。我正在尝试转换用户输入的坐标，以将我在 map 上的标记移动到这些坐标。例如，如果用户输入 50.75、74.1，标记将平移到该坐标。不幸的是，我无法让它工作。这是我的功能:

function moveMarker() {
  var Markerloc = document.getElementById("Markerloc").value;
  var newLatlng = new google.maps.LatLng(Markerloc);
  marker.setPosition(newLatLng)
}

这是我的 HTML 代码:

<input type="text" id= "Markerloc" value="Paste your coordinates" /> 
<input type="button" onclick="moveMarker()" value="Update Marker">

编辑:我认为这会解决它，但不知何故，它仍然不起作用。

这是我的代码:

<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>

最佳答案

这是 JSFiddle Demo:

更新:

它不工作的原因是因为您在初始化函数的范围内有变量标记，因此 moveMarker 无法访问 var 标记。因此，我继续通过在所有函数之外声明它来将标记移动到全局范围，这样 moveMarker 就可以访问和移动标记的位置。通过这样做，您必须删除初始化函数内标记的 var 声明。

marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable: true
});

请记住，修改后的代码只会移动标记的位置，但不会根据标记使 map 居中。您必须调用 map.setCenter(); 使 map 居中。

您需要单独解析出数字并使用 parseFloat() 将其设置为类型 Number。 google.maps.LatLng() Lat 和 Lng 有两个 Number 参数。一个更好的方法是创建两个文本字段。

<input type='text' id='markerLat' value='' />
<input type='text' id='markerLng' value='' />

一个用于纬度，另一个用于经度，并用

检索值

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

关于javascript - 谷歌地图 API v3 : Turning user input coordinates to latlng?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5368928/

25

4

0

文章推荐： javascript - 具有透明背景的html Canvas 运动模糊

文章推荐： ios - View Controller 未加载 Storyboard View

文章推荐： pointers - 这个 NSErrorPointer 类型是什么？

"this.users = users;" not binding to "users;" property(“this.users=用户；”不绑定到“用户；”属性)
export class UserListComponent implements OnInit{ users; constructor(private userService: UserS
java - user.region、user.language、user.country 和 user.variant 之间有什么区别？
我最近在我的系统中遇到了 Java 语言环境的问题，我试图用这个配置运行一个项目: -Duser.language=pt_BR -Duser.country=BR 谷歌搜索后，我找到了this sit
python - 经理不在； 'auth.User' 已替换为 'users.User'
1 当我希望出现注册错误时，我的代码出现问题:管理器不可用； 'auth.User' 已替换为 'users.User' ，我尝试解决其他问题，与 Manager 不可用相同； 'auth.User'
javascript - Loopback.js - 在 MongoDB 不创建 "User"和 "user"集合的情况下将基本 "User"模型扩展到 "user"
Loopback 非常酷，但这是我迄今为止遇到的一个缺点，我真的不确定如何解决它。内置用户模型在我的 MongoDB 数据库中生成一个名为“User”的集合，当我尝试根据 Loopback.js 自己
javascript - AWS认知: How to assign user to a user group when user signs up
我在 aws cognito 中有以下用户组。行政成员付费成员(member) 我想在所有用户注册我的应用程序时将所有用户默认分配到 Member 用户组，这样我就可以为该用户组分配不同的 IAM A
php - 找不到列 : 1054 Unknown column 'users.blog_id' :SQL: select * from `users` where `users` .`blog_id` = 1 and `users` .`blog_id` is not null
blogsIndex.blade.php @extends('layouts.default') @section('details')
ruby-on-rails - SQLite3::SQLException:没有这样的表:users:选择“users”。* FROM“users”
我正在尝试在Rails 3开发环境中使用sqlite3而不是MySQL，但是遇到了问题。尝试执行rake db:migrate时，我得到： SQLite3::SQLException: no such
data-structures - Phoenix 1.3 (Elixir) 错误 : Myapp. Users.User.__struct__/0 未定义，无法扩展 struct Myapp.Users.User
尝试使用构建 API Phoenix v1.3 按照本教程: https://dreamconception.com/tech/phoenix-full-fledged-api-in-five-mi
django - Postgres : Password authentication failed for user "user". 角色 "user"不存在
我正在使用通过模板 cookie-cutter 创建的 Django。当我尝试在本地使用 docker 运行项目时，出现以下错误。 FATAL: password authentication fai
node.js - 当我尝试创建新用户时，意外的 token user = wait User.create(user)
我正在尝试使用 node.js/adonis 创建新用户我创建了这两个函数: const User = use("App/Models/User") async store ({ request,
apache - 配置 Apache 将 "GET/user/foo"路由到/user/GET.php 并将 "PUT/user/foo"路由到/user/PUT.php
我想安排一些事情，例如 GET 请求 http://example.com/user/foo@bar.com 内部调用脚本 /var/www/example.com/rest/user/GET.php
user-interface - 有哪些很好的例子表明 "I am not the user"？
我是一名具有可用性工程背景的软件开发人员。当我在研究生院学习可用性工程时，其中一位教授有一句口头禅:“你不是用户”。我们的想法是，我们需要将 UI 设计基于实际的用户研究，而不是我们自己关于 UI 应
ios - 解析推送通知 : User to User
您好，我正在制作一个使用互联网发送消息的消息传递应用程序。我需要从用户 a 向用户 b 发出通知。我使用这段代码: if (toUser!= nil){ parseMessage[@
python - 使用 django，你可以做一些类似于 user = User.new(params[ :user]) during a form post?
在 ruby/ror 中你可以这样做: user = User.new(params[:user]) 它使用发布表单中的值填充新对象。使用 django/python 可以完成类似的事情吗？最
symfony - FOSUserBundle/Symfony2 : Force logout of a user given a user (not the currently logged in user)
每当我编辑用户的角色时，用户都需要注销并重新登录以查看更改。提升用户时没有问题，因为他们在再次登录之前不会看到额外的权限。但是，当降级发生时，用户仍将保留其现有角色，这会带来安全风险。想象一下，撤销一
ios - 一对一关系的值类型 Not Acceptable : property = "user"; desired type = User; given type = User;
我的核心数据有线问题。使用 iOS 10 中的 Swift3，每次使用获取或存储数据时，我都会获得托管对象上下文 func getContext () -> NSManagedObjectCont
ruby-on-rails - users_path(user) 在使用 devise 时返回/users.id 而不是/users/id
我发现当我使用 users_path(user) 时它返回 /users.id 其中 id 是用户的 ID 但我希望它返回 /用户/ID。我的配置 routes.rb 如下所示。 # config/r
android - 权限拒绝 : get/set setting for user asks to run as user -2 but is calling from user 0
我的应用程序在我的测试设备上正常运行(当我通过 ADT 安装它时，当我通过导出的 APK 文件安装它时)但它在 Play Store 测试设备上失败并出现以下错误: Permission Denial
python - 无法分配 "": "Model.user"必须是 "User"实例
创建模型的第一个条目会抛出错误我执行了以下命令进行迁移 manage.py makemigrations manage.py migrate 在我执行这些命令以在数据库中创建第一个“数据”之后，一切
android - 函数 'Stream' 无法返回类型为 'user' 的值，因为它在 flutter 中的返回类型为 'Stream'
我正在尝试实现一个 getter，但它在下面代码 fragment 的最后一行向我显示了这个错误。代码是—— class AuthRepository extends BaseAuthReposit

首页

博学

6Ren·AI

商城

javascript - 谷歌地图 API v3 : Turning user input coordinates to latlng?