时间戳

首页 > 解决方案 > jquery如何使用AJAX数据显示地图？

javascript - jquery如何使用AJAX数据显示地图？

问题描述

我目前正在完成一个具有以下要求的项目

  1. 在页面中创建一个名为“城市地图”的按钮。
  2. 选择一个国家并使用 AJAX get 方法加载城市列表后，单击按钮打开一个新窗口，其中显示所选城市地图。
  3. 每当在选择列表中更改城市并单击按钮时，将显示一个带有所选城市地图的新窗口。
<html>
<head>
   
   <style>
        body {
            background-color: #E8EAF6;
        }
        main {
            margin: 1em;
            width: 60%;
            padding: 1em;
        }
        select {
            padding: 0.5em;
        }
        #results {
            margin-top: 0.5em;
        }
   </style>
   <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script>
   $(function() {
       $("#country").change(function() {
           var param = "iso=" + $('#country').val();
      $.get("http://www.randyconnolly.com/funwebdev/services/travel/cities.php", param)
          .done(function (data) {
              var select = $("<select id='cities'></select>");
              // alternate way to loop through an array using jquery $.each() method
              $.each(data, function(index,city) {
                  select.append('<option value="' + city.id + '">' + city.name + "</option>");
              });
              $("#results").empty().append(select);                
          })
          .fail(function (jqXHR) {
              alert("Error: " + jqXHR.status);
          })
          .always(function () {
              console.log("service cities request finished");
          });
       });
   });
   </script>      
</head>    
<body>
    <main>
      <select id="country">
          <option value=0>Select a country</option>
          <option value='CA'>Canada</option>
          <option value='FR'>France</option>
          <option value='DE'>Germany</option>
          <option value='IT'>Italy</option>
          <option value='US'>United States</option>
      </select>

      <div id="results"></div>

      <button> city map </button>
   </main>


</body>   
</html>

我已经成功完成了上述操作，一旦选择了一个国家，就可以访问该城市。但是我不确定如何实现实际的地图功能。

我想出了以下pseduo，但是我不确定从那里去哪里

return array(
{id: cityId, name: cityName, etc.....},
)

标签： javascriptjqueryajax

解决方案

据我了解，您想打开一个包含该城市地图的新选项卡。正确的？如果是这样，答案很简单。如果您查看某个城市的对象，它包含该城市的纬度和经度。例如：“纬度”：“5.55602”，“经度”：“-0.1969”。

  1. 如果您想使用谷歌地图，他们有坐标文档 https://support.google.com/maps/answer/18539?hl=en&co=GENIE.Platform%3DDesktop

您只需在 url 中插入来自 API 的坐标并在新选项卡中打开链接。我无法运行您的示例，但这里有一个提示：

const city = {id:"",name:"Darmstadt",iso:"DE",latitude:"49.87056",longitude:"8.64944",population:"140385",elevation:"145"}
function openMap(city){
    const mapUrl = `https://www.google.com/maps/place/${city.latitude}+${city.longitude}`;
    window.open(mapUrl, '_blank').focus();
}

然后，您可以将此函数绑定到按钮并传递选定的地图。

  1. 如果您想将地图嵌入您的网站，请按照本教程操作： https ://developers.google.com/maps/documentation/javascript/adding-a-google-map#maps_add_map-javascript

希望能帮助到你。如果您对某事有任何疑问，请告诉我。

推荐阅读