个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
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>
最佳答案
更新:
它不工作的原因是因为您在初始化函数的范围内有变量标记，因此 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
我有一个 k*n矩阵 X 和 k*k矩阵A。对于X的每一列，我想计算标量 X[:, i].T.dot(A).dot(X[:, i]) (或者，数学上， Xi' * A * Xi )。 目前，我有一个
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我是 VueJS 的新手。我已经使用 vuetify/webpack-ssr 模板创建了一个项目，现在我想创建一个登录页面，但是没有显示表单，控制台给了我以下信息: [Vue warn]: Unkno
我尝试将 value 插入到 C++ vector v 之前的第 i 元素(或元素 (i-1) 之后) )。代码很简单 v.insert(v.begin() + i, value); 我确信当 i 介
我需要显示使用合并排序算法排序的 vector 。然而，当我使用 v.begin() 时，我的 friend 使用 v.data() 来传递 vector 。他的代码运行良好，而我的却不行。请解释。
这是我的命令(url1、url2、url3、url4 是占位符): ffmpeg -i url1 -i url2 -i url3 -i url4 -filter_complex “[1:v:0] [1
我以前用过Vue，我知道怎么用v-for渲染元素序列，v-if或v-show有条件地显示元素，并且 v-model例如，控制段落的内容。 但现在我需要对 DOM 进行更精细的控制: 我有一个range
我正在学习所有权和借用。 borrow1 和borrow2 的区别在于在borrow2 打印时使用了&: fn borrow1(v: &Vec) { println!("{}", &v[10]
我找不到一种方法来选择不同的选项来渲染 v-for 中的文本。是否有可能或者我是否需要以不同的方式构建逻辑来执行类似于下面的代码的操作？ // i
Iterable 的三个直接子类型是 Map , Seq , 和 Set .除了性能问题之外，似乎还有一个 Seq是从整数到值的映射，以及 Set是从值到 bool 值的映射(如果值在集合中，则为 t
我想应用一个计算方法，如果键存在则增加值，否则将 1。有 Map map = new HashMap<>(); 我不明白为什么 for (int i = 0; i v != null ? v++ :
标准(IEEE 754/C)是否保证以下代码断言永远不会失败？ int main() { for ( /* all possible float / double values */ )
代码由Vue语言编写，使用Element-ui框架， 如果一个对象包含某些内容，则会显示该内容，如果不包含则禁用菜单按钮。 输出应该是这样的: a、b(禁用)、c、d、e 但我的是这样的: a、a(禁
如果我这样做: {{ morevalue }} {{ value }} v-else 中的跨度也会在第二个 V-FOR 上循环，即使它上面没有任何 v-for，为什么？ 这是
如果我这样做: {{ morevalue }} {{ value }} v-else 中的跨度也会在第二个 V-FOR 上循环，即使它上面没有任何 v-for，为什么？ 这是
我将 Vue.js 与 Vuetify 一起使用，我正在尝试使用 v-data-table 从后端加载菜单列表并使用 对其设置一些权限v-switches 但我在尝试 v-model 数组时遇到问题:
我在 Java 的流式操作中努力维护我想要的数据结构，这很可能是由于缺乏正确的理解和实践。 public class Main { public static void main(String
我正在尝试为匹配中的每个匹配呈现一些 HTML，但是，我不太确定 实际上是正确的。 更具体地说，我不确定我是否可以使用 v-bind:match='match'在与循环相同的元素上 v-for='ma
所以我想知道为什么这个 v-if 和 v-else 语句不起作用，为什么我要以不同的方式解决它。 代码如下 Required: Select a Workflow {{ isChain ?
我有一个 VueJS 组件 ，我在同一个模板中使用了两次来显示两组不同的数据。每个都显示在自己的 使用 v-if 切换的容器在导航选项卡上。 似乎这些组件被实例化为同一个实例。我调用 console
我是一名优秀的程序员,十分优秀！