地图不使用 googlemaps js 显示 API

Question

我正在尝试使用示例代码来制作一个网页，以便在地图上显示多个图钉。

这是我的 html 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAs4c8xnkxcZNRK6yQt-Y21N1L3mT1AFfE&callback=initMap">
</script>
</head>
<body>

<div id="map" style="width: 1024px; height: 768px"></div>

<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
  However, it seems JavaScript is either disabled or not supported by your browser. 
  To view Google Maps, enable JavaScript by changing your browser options, and then 
  try again.
</noscript>


<script type="text/javascript">
//<![CDATA[

     // A function to create the marker and set up the event window
function createMarker(point,name)
{
    var marker = new google.maps.Marker({position: point, title: name});
    google.maps.event.addListener(marker, "click", function(){
        marker.openInfoWindowHtml(name);});

    return marker;
}

function initMap() 
{

    var map = new google.maps.Map(document.getElementById('map'));//, { center: {lat: -34.397, lng: 150.644},zoom: 8});

    var optionsCarte =  {
                            zoom: 8,
                            center: new google.maps.LatLng(48.5, 2.9),
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        };


    var map = new google.maps.Map(document.getElementById('map'), optionsCarte);

    var bounds = new google.maps.LatLngBounds();

    // ========== Read paramaters that have been passed in ==========

    // If there are any parameters at the end of the URL, they will be in  location.search
    // looking something like  "?q=My+First+Point@59.591,17.82"

    // skip the first character, we are not interested in the "?"
    var query = location.search.substring(1);

    // split the rest at each "&" character to give a list of  "argname=value"  pairs
    var pairs = query.split("&");

    for (var i=0; i<pairs.length; i++) 
    {
        // break each pair at the first "=" to obtain the argname and value
        var pos = pairs[i].indexOf("=");
        var argname = pairs[i].substring(0,pos).toLowerCase();
        var value = pairs[i].substring(pos+1);

        // process each possible argname  -  use unescape() if theres any chance of spaces
        if (argname == "q") 
        {
            var text = unescape(value);
            var parts = text.split("@");
            var latlng = parts[1].split(",");
            var point = new google.maps.LatLng(parseFloat(latlng[0]),parseFloat(latlng[1]));
            var title = parts[0];
            var marker = createMarker(point,title);       
            marker.setMap(map);       
            bounds.extend(point);
        }
    }

    //map.setZoom(map.getBoundsZoomLevel(bounds));
    map.fitBounds(bounds)
    map.setCenter(bounds.getCenter());

}   

</script>

诀窍是使用带参数的 url 来添加要显示的位置：

例如：http://myserver.com?q=MyFirstPoint@59.591,17.82

实际上什么都没有显示..

有人可以帮助我吗？我的 API 键在代码上 ;)

非常感谢，

此致，

很棒'

Answer 1

你有一个

 callback=initMap

但我看不到这个名字的函数

和你有类似的

<body onunload="GUnload()">

但我看不到这个名字的函数

您必须确定调用了正确的初始化函数来显示地图并在浏览器控制台中检查其他错误

Answer 2

?q=MyFirstPoint@59.591,17.82&q=MyLastPoint@54.591,12.82

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="map" style="width: 550px; height: 450px"></div>


<script>
    (function (myGoogleMap) {
        var map;
        var latLngBounds;

        myGoogleMap.init = function () {
            console.log('init');
            latLngBounds = new google.maps.LatLngBounds();
            map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: -34.397,
                    lng: 150.644
                },
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.TERRAIN,
                panControl: false,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false
            });
            getData();
        };

        function getData() {


            var query = location.search.substring(1);

            // split the rest at each "&" character to give a list of  "argname=value"  pairs
            var pairs = query.split("&");

            for (var i = 0, l = pairs.length; i < l; i++) {
                // break each pair at the first "=" to obtain the argname and value
                var pos = pairs[i].indexOf("=");
                var argname = pairs[i].substring(0, pos).toLowerCase();
                var value = pairs[i].substring(pos + 1);

                // process each possible argname  -  use unescape() if theres any chance of spaces
                if (argname == "q") {
                    var text = decodeURI(value);
                    var parts = text.split("@");
                    var latlng = parts[1].split(",");
                    setMarker(parseFloat(latlng[0]), parseFloat(latlng[1]), parts[0]);
                }
            }
            centerMap();
        }

        function setMarker(lat, lng, contentString) {
            var latLng = new google.maps.LatLng(lat, lng);
            latLngBounds.extend(latLng);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });
        }

        function centerMap() {
            map.fitBounds(latLngBounds);
        }

    }(window.myGoogleMap = {}))
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAs4c8xnkxcZNRK6yQt-Y21N1L3mT1AFfE&callback=myGoogleMap.init"></script>

<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
    However, it seems JavaScript is either disabled or not supported by your browser.
    To view Google Maps, enable JavaScript by changing your browser options, and then
    try again.
</noscript>
</body>
</html>

希望对您有所帮助。

地图不使用 googlemaps js 显示 API

map don't display with googlemaps js API

javascript

google-maps

geocoding

google-maps-api-3