Question

我正在尝试创建一个谷歌地图。纬度和经度来自数据库，因此我必须将它们放在文本框中，然后在脚本中获取其值。我尝试过这样做但是它不起作用你会帮助我这个吗？这是我的JavaScript：

function initMap() {

        var lat = document.getElementById('lat');
        var lang = document.getElementById('lang');

    var uluru = {lat: lat, lng: lang };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: uluru
    });
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
    });
}

这是html：

<input type="text" style="display: none" id="lat" value="7.8383054" />
<input type="text" style="display: none" id="lang" value="123.2966657" />

<div id="map" ">
</div>

JSfiddle

Answer 1

the "numbers" in the text fields are access using the .value property:
the lat/lng in a google.maps.LatLngLiteral must be numbers. (without the parseFloat the API throws these errors:
- InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
- InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

var lat = parseFloat(document.getElementById('lat').value);
var lang = parseFloat(document.getElementById('lang').value);

You need to actually call the initMap method (your fiddle isn't doing this)

updated fiddle

code snippet:

html,
body,
#map {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<input type="text" id="lat" value="7.8383054" />
<input type="text" id="lang" value="123.2966657" />

<div id="map" ">
</div>
<script>
function initMap() {

        var lat = parseFloat(document.getElementById('lat').value);
        var lang = parseFloat(document.getElementById('lang').value);

    var uluru = {lat: lat, lng: lang };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: uluru
    });
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
    });
}
</script>

Answer 2

尝试：

var lat = document.getElementById('lat').value;
var lang = document.getElementById('lang').value;

Answer 3

除了不实际使用文本输入的值或调用返回这些值的函数之外，还不确定你的问题在哪里，但这些行可能会帮助你开始。如果您需要用户输入不同的lat / lng坐标，那么您还需要分配一个事件处理程序来监听更改，或者需要一个按钮来提交新坐标。

<?php
    /*

    */
?>

<!doctype html>
<html>
    <head>
        <title>Google maps</title>
        <script src='https://www.google.com/jsapi' charset='utf-8'></script>
        <script src='https://maps.google.co.uk/maps/api/js?key=APIKEY' charset='utf-8'></script>
        <script type='text/javascript' charset='utf-8'>
            function initMap() {
                var uluru = {
                    lat: document.getElementById('lat').value,
                    lng: document.getElementById('lang').value
                };
                var options={
                    zoom: 4,
                    center: uluru
                };

                var map = new google.maps.Map( document.getElementById('map'), options );
                var marker = new google.maps.Marker({
                    position: uluru,
                    map: map
                });
            }

            document.addEventListener( 'DOMContentLoaded', initMap, false );
        </script>
        <style type='text/css' charset='utf-8'></style>
    </head>
    <body>

        <div id='map'></div>
        <div>
            <input type='text' id='lat' value='7.8383054' />
            <input type='text' id='lang' value='123.2966657' />
        </div>
    </body>
</html>

Answer 4

call initMap() function in body tag. it will load the map, the most important thing do you have api key ? you also need ssl to use google maps. means your url must be https://yourdomain.com

body onload="initMap()"

创建一个连接到数据库的谷歌地图

4 个答案: