【问题标题】:Google maps get latitude and longitude having city name?谷歌地图获得具有城市名称的纬度和经度?
【发布时间】:2012-06-24 08:04:02
【问题描述】:

我想通过向 API 提供城市名称来获取城市的纬度和经度。无论用户如何输入城市,它都应该适用于大多数城市。

例如:

城市可以是“美国迈阿密”或城市可以是“美国迈阿密”

如何打印它的纬度?

【问题讨论】:

    标签: javascript google-maps


    【解决方案1】:

    根据以下评论更新: 2018 年 7 月后不再有效。


    这似乎是不必要的复杂。这是一个示例“附近事件”地图。它需要City, States,将它们转换为latLng 坐标,并在地图上放置标记:

    // Nearby Events with Google Maps
    window.nearbyEventsMap = () => {
        const centerOfUS = {
            lat: 37.09024,
            lng: -95.712891
        }
    
        // Create a map object and specify the DOM element for display.
        const map = new google.maps.Map(document.querySelector('#nearby_events_map'), {
            center: centerOfUS,
            scrollwheel: false,
            zoom: 4
        })
    
        // Create a marker and set its position.
        const geocoder = new google.maps.Geocoder()
    
        // Filter out duplicate cityStates
        let cityStates = {}
        document.querySelectorAll('.nearby_event_city_state').forEach(event => {
            cityStates[event] = event.innerText
        })
    
        // `cityState` is in the format of "City, State". It's not picky about state being a word or the abbreviation.
        for (const cityState in cityStates) {
            const location = cityStates[cityState]
    
            geocoder.geocode({
                address: location
            }, function (results, status) {
                if (status === 'OK') {
                    const result = results[0].geometry.location
                    const lat = result.lat()
                    const lng = result.lng()
                    const latLng = {
                        lat,
                        lng
                    }
    
                    return new google.maps.Marker({
                        map: map,
                        position: latLng
                    })
                }
            })
        }
    }
    // /Nearby Events with Google Maps
    

    确保包含您的<script> 标签。

    <script src="/dist/js/main.js"></script>
    
    <!-- We're loading this after the main.js script so the callback from main.js will be available to it. -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=nearbyEventsMap"></script>
    

    StackOverflow 请加入其他所有人并获取带有语法突出显示的 GitHub markdown...

    【讨论】:

    • 您现在需要 API 密钥才能访问此服务
    • API 密钥包含在&lt;script&gt; 位中,但谷歌几乎每年都会改变这些东西的工作方式,所以他可能是对的,但它不起作用。现在我建议使用一个维护的库,所以当谷歌改变地图的工作方式时,你只需要做类似npm install that-library@latest 这样的事情,而不是一遍又一遍地从头开始解决这个问题...... :(
    【解决方案2】:

    你可以在这里找到 jsfiddled 的代码:http://jsfiddle.net/YphZw/ 或以下:

    $("#btn").click(function(){
                var geocoder =  new google.maps.Geocoder();
        geocoder.geocode( { 'address': 'miami, us'}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                alert("location : " + results[0].geometry.location.lat() + " " +results[0].geometry.location.lng()); 
              } else {
                alert("Something got wrong " + status);
              }
            });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <html>
    <head>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    </head>
    <body>
        <input id="btn" type="button" value="search for miami coordinates" />
    </body>
    </html>

    如果您想了解更多 Javascript API 示例,请尝试以下链接:https://developers.google.com/maps/documentation/javascript/examples/

    我编写的代码灵感来自 geocoding-simple 示例。

    问候。

    编辑 1:

    您可以使用非官方的 PHP 库来实现它。检查这个例子: http://www.bradwedell.com/phpgooglemapapi/demos/geocoding.php (代码在底部=

    【讨论】:

    • 有没有办法用 PHP 做同样的事情?谢谢
    【解决方案3】:

    您可以使用谷歌的地理编码服务,例如,

    http://maps.googleapis.com/maps/api/geocode/xml?address=Miami+FL&sensor=false

    这将为您提供各种格式(JSON、XML 等)的地理参考数据。无论如何,位置肯定在返回的数据块中。

    API 文档位于:

    https://developers.google.com/maps/documentation/geocoding/

    【讨论】:

    • 您在上面提供的 API Docs 链接和您描述的方法是关于 Google Maps API Web Services 而不是 Javascript 的。
    • 噢!抱歉——JS API 的链接(非常相似)在那个页面上。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-01-18
    • 2013-12-09
    • 1970-01-01
    • 1970-01-01
    • 2013-03-03
    • 2011-04-30
    相关资源
    最近更新 更多