如何根据纬度和经度获取谷歌地图？

Question

我想在我的网页中显示基于经度和纬度的Google地图。首先，用户需要在两个文本框中输入经度和纬度。然后点击提交按钮，我必须在Google地图上显示适当的位置。并且我还想显示天气报告。如何实现？谢谢。

- Gnaniyar Zubair

Answer 1

创建一个如下格式的URI： https://maps.google.com/?q=[lat],[long] 例如： https://maps.google.com/?q=-37.866963,144.980615 如果你正在使用JavaScript API ，则可以这样：

map.setCenter(new GLatLng(0,0))

这些有用的信息及其他内容来自于以下网址：

https://developers.google.com/maps/documentation/javascript/reference/?csw=1#Map

- jsw

---

您也可以使用静态地图API获取该地点的静态图像--http://code.google.com/apis/maps/documentation/staticmaps/（例如http：//maps.google.com/maps/api/staticmap?center=-37.866963，144.980615&zoom =14&size=512x512&maptype=roadmap&sensor=false） - Jason Hall

或者使用JS API嵌入可滚动的JS地图 - http://code.google.com/apis/maps/documentation/javascript/basics.html - Jason Hall

如何将纬度和经度传递给JavaScript以显示Google地图而不是iframe？ - Gnaniyar Zubair

Answer 2

以下是使用JavaScript根据您提供的经度和纬度显示Google地图的代码。

<script>
    function initialize() {
      var myLatlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
      document.body.appendChild(script);
    }

    window.onload = loadScript;


</script>

- Gnaniyar Zubair

---

我尝试将上述代码粘贴到我的页面上，但什么也没有显示。我需要额外的代码来使其工作吗？ - LTech

遇到了同样的问题。 - steel

你需要在某个地方添加<div="map_canvas"></div>。 - StiGMaT

实际上你需要: <div id="map_canvas"></div> - Nico Westerdale

Answer 3

首先添加一个带有id的div。

<div id="my_map_add" style="width:100%;height:300px;"></div>

<script type="text/javascript">
function my_map_add() {
var myMapCenter = new google.maps.LatLng(28.5383866, 77.34916609);
var myMapProp = {center:myMapCenter, zoom:12, scrollwheel:false, draggable:false, mapTypeId:google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("my_map_add"),myMapProp);
var marker = new google.maps.Marker({position:myMapCenter});
marker.setMap(map);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=your_key&callback=my_map_add"></script>

- Pankaj Dubey

Answer 4

您是否了解过谷歌的地理编码API。以下链接将帮助您入门：http://code.google.com/apis/maps/documentation/geocoding/#GeocodingRequests

- Ozair Kafray

Answer 5

<script>
    function initMap() {
        //echo hiii;

        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(8.5241, 76.9366),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

        // Change this depending on the name of your PHP or XML file
        downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('package');
            Array.prototype.forEach.call(markers, function(markerElem) {
                var id = markerElem.getAttribute('id');
                // var name = markerElem.getAttribute('name');
                // var address = markerElem.getAttribute('address');
                // var type = markerElem.getAttribute('type');
                // var latitude = results[0].geometry.location.lat();
                // var longitude = results[0].geometry.location.lng();
                var point = new google.maps.LatLng(
                    parseFloat(markerElem.getAttribute('latitude')),
                    parseFloat(markerElem.getAttribute('longitude'))
                );

                var infowincontent = document.createElement('div');
                var strong = document.createElement('strong');
                strong.textContent = name
                infowincontent.appendChild(strong);
                infowincontent.appendChild(document.createElement('br'));

                var text = document.createElement('text');
                text.textContent = address
                infowincontent.appendChild(text);
                var icon = customLabel[type] || {};
                var package = new google.maps.Marker({
                    map: map,
                    position: point,
                    label: icon.label
                });

                package.addListener('click', function() {
                    infoWindow.setContent(infowincontent);
                    infoWindow.open(map, package);
                });
            });
        });
    }


    function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
            if (request.readyState == 4) {
                request.onreadystatechange = doNothing;
                callback(request, request.status);
            }
        };

        request.open('GET', url, true);
        request.send(null);
    }

- gfhgfhj uu

---

这个对于通过数据库进行地图集成是正确的吗？ - gfhgfhj uu