使用 jQuery 创建一个简单的地图

简介

使用 jQuery 可以轻松地创建一个简单的地图。在这篇文章中，我们将学习如何使用 jQuery 和 Google Maps API 创建一个简单的地图，并添加标记和信息窗口。

准备工作

在开始创建地图之前，你需要完成以下步骤：

1. 在 Google Cloud Platform 中创建一个项目并启用 Google Maps JavaScript API。

2. 获取生成的 API 密钥。

3. 在你的 HTML 中添加 jQuery 和 Google Maps API 的链接。

   <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
   <script
     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
     async
     defer
   ></script>
   

4. 创建一个 HTML 元素来容纳地图。

   <div id="map"></div>
   

创建地图

使用 jQuery 创建地图的第一步是创建一个名为 initMap 的函数。该函数将在 Google Maps API 加载后调用，以初始化地图并设置默认的中心和缩放级别。

function initMap() {
  // 设置中心和缩放级别
  var myLatLng = { lat: 39.9042, lng: 116.4074 };
  var mapOptions = {
    zoom: 10,
    center: myLatLng,
  };
  // 创建地图对象
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

在这个函数中，我们首先定义了一个包含纬度和经度的对象 myLatLng，该对象表示地图的中心坐标。接下来，我们创建了一个名为 mapOptions 的对象，该对象包含了地图的设置，包括缩放级别和中心坐标。最后，我们将创建一个 google.maps.Map 对象，该对象使用 document.getElementById 在 HTML 中找到 id 为 map 的元素，并将 mapOptions 作为参数传递。

添加标记

现在我们已经创建了一个地图，让我们向地图添加一个标记。我们将使用 google.maps.Marker 类来创建一个标记。

function initMap() {
  // 设置中心和缩放级别
  var myLatLng = { lat: 39.9042, lng: 116.4074 };
  var mapOptions = {
    zoom: 10,
    center: myLatLng,
  };
  // 创建地图对象
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  // 添加标记
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: "Hello World",
  });
}

在这个函数中，我们添加了一个名为 marker 的变量，该变量创建了一个使用 myLatLng 作为位置的标记，并在地图上显示。我们还将 title 设置为“Hello World”。

添加信息窗口

在地图上添加一个信息窗口是一个好方法，让用户获取更多的信息。我们将使用 google.maps.InfoWindow 类来创建一个信息窗口。

function initMap() {
  // 设置中心和缩放级别
  var myLatLng = { lat: 39.9042, lng: 116.4074 };
  var mapOptions = {
    zoom: 10,
    center: myLatLng,
  };
  // 创建地图对象
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  // 添加标记
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: "Hello World",
  });
  // 创建信息窗口
  var contentString = "<h1>Hello World!</h1>";
  var infowindow = new google.maps.InfoWindow({
    content: contentString,
  });
  // 添加标记点击事件
  marker.addListener("click", function () {
    infowindow.open(map, marker);
  });
}

在这个函数中，我们添加了一个名为 contentString 的字符串，该字符串包含要在信息窗口中显示的内容。然后，我们创建了一个名为 infowindow 的变量，该变量创建了一个信息窗口并将 contentString 作为内容。最后，我们向 marker 添加了一个监听器，当用户单击标记时，它将打开 infowindow。

完整代码

最终的代码如下所示：

function initMap() {
  // 设置中心和缩放级别
  var myLatLng = { lat: 39.9042, lng: 116.4074 };
  var mapOptions = {
    zoom: 10,
    center: myLatLng,
  };
  // 创建地图对象
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  // 添加标记
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: "Hello World",
  });
  // 创建信息窗口
  var contentString = "<h1>Hello World!</h1>";
  var infowindow = new google.maps.InfoWindow({
    content: contentString,
  });
  // 添加标记点击事件
  marker.addListener("click", function () {
    infowindow.open(map, marker);
  });
}

结论

通过学习本文中的内容，你应该能够使用 jQuery 和 Google Maps API 创建一个简单的地图，并向地图添加标记和信息窗口。在实际应用中，你可以根据自己的需要定制地图，并在其中添加更多的功能。