如何從html表單到谷歌地圖獲取緯度經度值

Question

<head>
    <script
            src="http://maps.googleapis.com/maps/api/js">
    </script>

    <script>
        function ShowMap(latitude,longitude) {
            console.log("This is latitude :" + latitude);
            console.log("This is longitude :" + longitude);

            var myCenter = new google.maps.LatLng(latitude, longitude);
            var marker;

            function initialize() {
                var mapProp = {
                    center: myCenter,
                    zoom: 5,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

                var marker = new google.maps.Marker({
                    position: myCenter,
                    animation: google.maps.Animation.BOUNCE
                });

                marker.setMap(map);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        }


    </script>
</head>

我在html 的標題中有相關數據

在html的正文中，我有一個表單

 <form>
        <input type="number" name="latitude" >
        <input type="number" name="longitude" >

        <input type="button" onclick="ShowMap(latitude.value,longitude.value)" value="ShowMap"/>
    </form>

采用緯度和經度的輸入具有要繪制圖形的輸入，但是，現在我得到函數圖中的值未顯示是不是我做錯了什么

Answer 1

您需要直接調用初始化例程，這是行不通的：

google.maps.event.addDomListener(window, 'load', initialize);

由於窗口load事件已經觸發。

工作小提琴

代碼片段：

 function ShowMap(latitude, longitude) { console.log("This is latitude :" + latitude); console.log("This is longitude :" + longitude); var myCenter = new google.maps.LatLng(latitude, longitude); var marker; function initialize() { var mapProp = { center: myCenter, zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); var marker = new google.maps.Marker({ position: myCenter, animation: google.maps.Animation.BOUNCE, title: myCenter.toUrlValue(6) }); marker.setMap(map); } initialize(); }

 html, body, #googleMap { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <form> <input type="number" name="latitude" value="42" /> <input type="number" name="longitude" value="-72" /> <input type="button" onclick="ShowMap(latitude.value,longitude.value)" value="ShowMap" /> </form> <div id="googleMap"></div>

Answer 2

請試試這個：

function ShowMap(latitude, longitude) {
    console.log("This is latitude :" + latitude);
    console.log("This is longitude :" + longitude);

    var myCenter = new google.maps.LatLng(latitude, longitude);
    var marker;

    function initialize() {
        var mapProp = {
            center: myCenter,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

        var marker = new google.maps.Marker({
            position: myCenter,
            animation: google.maps.Animation.BOUNCE
        });

        marker.setMap(map);
    }

    initialize();

演示在這里

如何從html表單到谷歌地圖獲取緯度經度值

問題描述

2 個解決方案

解決方案1
1 2015-11-13 05:49:50

解決方案2
0 已采納

如何從html表單到谷歌地圖獲取緯度經度值

問題描述

2 個解決方案

解決方案1 1 2015-11-13 05:49:50

解決方案2 0 已采納

解決方案1
1 2015-11-13 05:49:50

解決方案2
0 已采納