程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了通过Google Maps API使用地址而不是经度和纬度大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决通过Google Maps API使用地址而不是经度和纬度?

开发过程中遇到通过Google Maps API使用地址而不是经度和纬度的问题如何解决?下面主要结合日常开发的经验,给出你关于通过Google Maps API使用地址而不是经度和纬度的解决方法建议,希望对你解决通过Google Maps API使用地址而不是经度和纬度有所启发或帮助;

使用Google Maps JavaScript API v3Geocoder将地址转换为可以在地图上显示的坐标。

<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.@R_489_5352@n);

            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.@R_489_5352@n,
                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>

工作代码段:

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.@R_489_5352@n);



          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.@R_489_5352@n,

            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);

      }

    });

  }

}

Google.maps.event.addDomListener(window, 'load', initializE);


HTML,

body,

#map_canvas {

  height: 100%;

  wIDth: 100%;

}


<script type="text/JavaScript" src="http://maps.Google.com/maps/API/Js?sensor=false"></script>

<div ID="map_canvas" ></div>

解决方法

我听说可以提交一个地址而不是经度和纬度,这对于我的系统来说将更加可行。用户在创建个人资料时必须输入他们的地址,之后他们的个人资料将显示其房屋的Google地图。我目前可以将Google
Maps API与经度和纬度完美配合使用:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css.css" />
    <title>Login Page</title>

<meta name="viewport" content="initial-scale=1.0,user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
  center: new google.maps.LatLng(52.640143,1.28685),zoom: 15,mapTypEID: google.maps.MapTypEID.roaDMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),mapOptions);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(52.640143,map: map,title: "Mark On Map"
});
  }
  google.maps.event.addDomListener(window,'load',initializE);
</script>

</head>

请有人帮我修改代码,以便它使Google Maps API可以在其位置请求地址,因为我想直接从mySQL数据库中读取用户的地址。

大佬总结

以上是大佬教程为你收集整理的通过Google Maps API使用地址而不是经度和纬度全部内容,希望文章能够帮你解决通过Google Maps API使用地址而不是经度和纬度所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。