个人中心
gpt4 book ai didi

Javascript google maps api 输入地址显示位置

转载 作者：行者123 更新时间：2023-11-30 18:04:44 24 4
gpt4 key购买 nike

我的应用程序目前根据硬编码的纬度和经度查找最近的滑雪场。我希望能够输入地址并将该地址转换为纬度和经度以进行搜索。我正在使用 Google Maps api 和地点库。我知道我不知何故需要使用地理编码，但不确定该怎么做。这是代码:

 <!DOCTYPE html>
    <html>
  <head>
    <meta charset="utf-8">
    <title>ski finder</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>

    <style>
      #map {
        height: 400px;
        width: 600px;
        border: 1px solid #333;
        margin-top: 0.6em;
      }
    </style>

    <script>
      var map;
      var infowindow;

      function initialize() {
        var loca = new google.maps.LatLng(41.7475, -74.0872);

        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: loca,
          zoom: 8
        });

        var request = {
          location: loca,
          radius: 50000,
          name: 'ski',
          keyword: 'mountain',
          type: ['park']


        };
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);
      }

      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }

      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'mouseover', function() {
          infowindow.setContent(place.name);
          infowindow.open(map, this);
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
      </head>
      <body>
        <h1> Welcome to Ski Finder </h1>
        <p> Please enter you location below, and we will find your local ski areas. </p>
        <form>
        <label for="zip">Zip Code: </label>
        <input type = "text" name="zip" placeholder = "12345" autofocus>
    </form>
        <div id="map"></div>
        <div id="text">

      </body>
    </html>

我还尝试使用 google map 开发人员页面上的示例，但无法正常工作。先谢谢了。

最佳答案

使用地理编码器设置传递给地点搜索的位置:

working example

代码片段:

var geocoder;
var map;
var infowindow;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var loca = new google.maps.LatLng(41.7475, -74.0872);

  map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: loca,
    zoom: 8
  });

}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      var request = {
        location: results[0].geometry.location,
        radius: 50000,
        name: 'ski',
        keyword: 'mountain',
        type: ['park']
      };
      infowindow = new google.maps.InfoWindow();
      var service = new google.maps.places.PlacesService(map);
      service.nearbySearch(request, callback);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
#map {
  height: 400px;
  width: 600px;
  border: 1px solid #333;
  margin-top: 0.6em;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<title>ski finder</title>

<h1> Welcome to Ski Finder </h1>
<p>Please enter you location below, and we will find your local ski areas.</p>
<form>
  <label for="zip">Zip Code:</label>
  <input type="text" id="address" placeholder="12345" autofocus></input>
  <input type="button" value="Submit" onclick="codeAddress();"></input>
</form>
<div id="map"></div>
<div id="text">

关于Javascript google maps api 输入地址显示位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16063670/

24 4 0
文章推荐： MySQL:我可以更新当前结果集中的记录还是需要 2 个并行查询/连接
文章推荐： javascript - 从函数返回值作为jQuery中参数的值
文章推荐： c# - 如何做高级 ASP.NET MVC (3) 路由(计算操作等)？
文章推荐： c - NetBeans 中的 .c 文件集合及其 main()
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com