地图不显示与谷歌地图 js API 一起

map don't display with googlemaps js API

本文关键字：js API 一起 谷歌地图 显示 地图      更新时间：2023-09-26

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

这是我的 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 密钥在代码;)

多谢

此致敬意

晶圆厂'

你有一个 

 callback=initMap

但我没有看到这个名字的功能

和类似的你有 

<body onunload="GUnload()">

但我没有看到这个名字的功能

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

？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>

我希望这能有所帮助。

相关文章：