如何将地址转换为经度和纬度，然后在页面上显示地图

How to convert an address to longitude and latitude then display a map on the page

本文关键字：然后 地图 显示 纬度 地址 转换 经度      更新时间：2023-09-26

我试图使用谷歌地图api将我的地址转换为经度和纬度，然后在页面上显示地图。

只是一个注意我使用PHP/Laravel从数据库检索地址。因此，尽管它是一个硬编码的new york值，但在我使其工作后，它将是动态的。

<div id="map" style="height:250px"></div>
Javascript

<script>
    var geocoder = new google.maps.Geocoder();
    var address = "new york";
    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            alert(latitude);
        }
    });
    function initMap() {
        var myLatLng = {lat: latitude, lng: longitude};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: myLatLng
        });
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Hello World!'
        });
    }


</script>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=keyremoved&callback=initMap">
</script>

目前我得到的错误"Uncaught ReferenceError:谷歌是没有定义"

修改脚本顺序

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=keyremoved&callback=initMap">
</script>
<script>
   var geocoder = new google.maps.Geocoder();
    var address = "new york";
   // rest of the code
</script>

如上所述，代码需要放在回调函数中。

<script>    
        function initMap(address) {
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                }
                console.log(latitude);
                console.log(longitude);
                var myLatLng = {lat: latitude, lng: longitude};
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: myLatLng
                });
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: 'Hello World!'
                });
            });

        }


    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCY2buDtbYIot8Llm_FkQXHW36f0Cme6TI&callback=initMap">
    </script>
相关文章：