谷歌地图API 开发 之 获取坐标以及街道详情

自己的项目中有获取当前点击的坐标经纬度或者获取当前街道的信息的需求。
估计这个对于新手来说，还是比较麻烦的，因为从官网上找这个也并不是很好找，要找好久的，运气好的可能会一下子找到。

献上自己写的测试案例。代码如下：

    Simple Map        html,        body {            height: 100%;            margin: 0;            padding: 0;        }        # map {            height: 100%;        }        function initMap() {            var myLatlng = {                lat: 39.921323,                lng: 116.426239            };            var marker ;            var markersArray = [];            var map = new google.maps.Map(document.getElementById('map'), {                zoom: 12,                center: myLatlng            });            map.addListener('click', function(e) {                addMarker(e.latLng, map);                //根据经纬度获取 当前地理信息                var latLngData = e.latLng.lat().toFixed(6)+','+e.latLng.lng().toFixed(6);                console.log(latLngData)                $.ajax({                    type:"post",                    url:"https://maps.googleapis.com/maps/api/geocode/json?latlng="+latLngData+"&location_type=ROOFTOP&result_type=street_address&key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE",                    async:true,                    success:function(data){                        console.log(data)                        var site = latLngData+'[br]'+data.results[0].formatted_address;                        console.log(site)                        var infowindow = new google.maps.InfoWindow({                            content: site                        });                        infowindow.open(map,marker); //弹出信息提示窗口                    }                });            });            //添加坐标对象            function addMarker(latLng, map) {                if(markersArray.length>0){                        markersArray[0].setMap(null);                };                markersArray.shift(marker)                marker = new google.maps.Marker({                    position: latLng,                    map: map                });                markersArray.push(marker);            }        }

注意：请引入自己本地的jquery，因为要用的ajax请求，谷歌的地理服务接口。

代码的核心就在于请求的URL：

url:"https://maps.googleapis.com/maps/api/geocode/json?latlng="+latLngData+"&location_type=ROOFTOP&result_type=street_address&key=AIzaSyC8IXpNgfA7uD-Xb0jEqhkEdB7j3gbgOiE"

这个是经纬度反向地理编码， 这段url里有四个参数：latlng，location_type，result_type，key，具体概念以及参数详解，请参考下一章的 谷歌地图API 开发 之 Geocoding API

关键字：JavaScript, html5, 谷歌地图, 开放平台

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！