个人中心
gpt4 book ai didi

javascript - 如何在谷歌地图中使用地址而不是经度和纬度？

转载 作者：行者123 更新时间：2023-12-02 17:41:47 26 4
gpt4 key购买 nike

我有这个正在运行的脚本。我可以拖动标记，它将用经度和纬度填充两个文本输入字段。我有变量“地址”，其中包含州和县。我应该如何更改我的代码以使其使用地址变量而不是静态纬度和经度变量。所以最初我希望 map 位于地址位置的中间。

function selectState(state_id){
if(state_id!="-1"){
loadData('city',state_id);
var e = document.getElementById("state");
var stateloc = e.options[e.selectedIndex].value;

var address = state_id + stateloc;

 var $latitude = document.getElementById('latitude');
 var $longitude = document.getElementById('longitude');
 var latitude = 35.00636021320537
 var longitude = -53.46687316894531;
 var zoom = 12;

var LatLng = new google.maps.LatLng(latitude, longitude);

var mapOptions = {
  zoom: zoom,
  center: LatLng,
  panControl: false,
  zoomControl: true,
  scaleControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}  

var map = new google.maps.Map(document.getElementById('map'),mapOptions);

var marker = new google.maps.Marker({
  position: LatLng,
  map: map,
  title: 'Drag Me!',
  draggable: true
});

google.maps.event.addListener(marker, 'dragend', function(marker){
  var latLng = marker.latLng;
  $latitude.value = latLng.lat();
  $longitude.value = latLng.lng();
});


      }else{ $("#city_dropdown").html("<option value='-1'>Select city</option>");
}
  }

html

     <li>
              <label for="lat">Latitude:</label>
              <input id="latitude" placeholder="latitude" name="lat" type="text" class="text" />
            </li>
                  <li>
              <label for="lon">Longitude:</label>
              <input id="longitude" placeholder="longitude" name="lon" class="text" type="text"/>
            </li>
   <div id="map" style="width: 460px; height: 350px;"></div>

最佳答案

查看此代码 here ，它使用“圣地亚哥，加利福尼亚州”来启动 map 。 

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  var address ="San Diego, CA";
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    if (geocoder) {
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);

            var infowindow = new google.maps.InfoWindow(
                { content: '<b>'+address+'</b>',
                  size: new google.maps.Size(150,50)
                });

            var marker = new google.maps.Marker({
                position: results[0].geometry.location,
                map: map, 
                title:address
            }); 
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });

          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
 <div id="map_canvas" style="width:100%; height:100%">
</body>
</html>

答案来源:Using Address Instead Of Longitude And Latitude With Google Maps API

您需要做的是，使用地理编码将“文本地址”转换为相应的纬度和经度，然后使用这些值提供给 Google Map API。

您可以在 map 文档 https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests 中阅读有关 Google 地理编码的更多信息

以及文档中的示例代码

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

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
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="panel">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input type="button" value="Geocode" onclick="codeAddress()">
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

关于javascript - 如何在谷歌地图中使用地址而不是经度和纬度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22138411/

26 4 0
文章推荐： javascript - 动画不会消失
文章推荐： Symfony 3 跨子域共享 cookie？
文章推荐： for-loop - 循环中前自增和后自增的区别？
文章推荐： javascript - openlayers 如何检测标记是否在多边形内
行者123
个人简介

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

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