📌  相关文章
📜  节点从地图中获取值 - Javascript (1)

📅  最后修改于: 2023-12-03 15:11:49.302000             🧑  作者: Mango

节点从地图中获取值 - JavaScript

当我们使用 JavaScript 创建交互式地图时，我们需要从地图中获取节点的值。这些节点可以是地图上的标记，也可以是其他类型的节点。

获取地图标记的值

使用 JavaScript，我们可以轻松地获取地图上标记的值。下面是一个例子，演示如何使用 JavaScript 从 Google 地图中获取标记的经纬度：

// 1. 初始化地图
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 8,
  center: { lat: -34.397, lng: 150.644 }
});

// 2. 创建标记
var marker = new google.maps.Marker({
  position: { lat: -34.397, lng: 150.644 },
  map: map,
  title: "Marker"
});

// 3. 获取标记的经纬度
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

// 4. 在控制台中输出经纬度
console.log("Latitude: " + lat);
console.log("Longitude: " + lng);

在这个例子中，我们首先创建了一个新地图，并添加了一个标记。然后，我们使用 getPosition() 方法获取标记的经纬度，并将其保存到变量中。最后，我们在控制台中打印经纬度信息。

```javascript
// 1. 初始化地图
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 8,
  center: { lat: -34.397, lng: 150.644 }
});

// 2. 创建标记
var marker = new google.maps.Marker({
  position: { lat: -34.397, lng: 150.644 },
  map: map,
  title: "Marker"
});

// 3. 获取标记的经纬度
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();

// 4. 在控制台中输出经纬度
console.log("Latitude: " + lat);
console.log("Longitude: " + lng);


## 获取其他类型的节点的值

除了地图标记，我们还可以使用 JavaScript 获取其他类型的节点的值。例如，我们可以从文本框、复选框和下拉菜单中获取选中的值。下面是一个简单的例子：

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Get Values</title>
  </head>
  <body>
    <select id="mySelect">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <br>
    <input type="text" id="myInput">
    <br>
    <input type="checkbox" id="myCheckbox">
    
    <script>
      var mySelect = document.getElementById("mySelect");
      var myInput = document.getElementById("myInput");
      var myCheckbox = document.getElementById("myCheckbox");
      
      console.log(mySelect.value);
      console.log(myInput.value);
      console.log(myCheckbox.checked);
    </script>
  </body>
</html>

在这个例子中，我们使用 getElementById() 方法获取了三个不同类型的节点：<select>、<input> 和 <checkbox>。然后，我们使用相应的属性（value 和 checked）获取它们的值，并将其打印到控制台中。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Get Values</title>
  </head>
  <body>
    <select id="mySelect">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <br>
    <input type="text" id="myInput">
    <br>
    <input type="checkbox" id="myCheckbox">
    
    <script>
      var mySelect = document.getElementById("mySelect");
      var myInput = document.getElementById("myInput");
      var myCheckbox = document.getElementById("myCheckbox");
      
      console.log(mySelect.value);
      console.log(myInput.value);
      console.log(myCheckbox.checked);
    </script>
  </body>
</html>