地图不使用 googlemaps js API 显示答案

【问题标题】：map don't display with googlemaps js API地图不使用 googlemaps js API 显示
【发布时间】：2016-05-26 18:29:45
【问题描述】：

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

这是我的 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 密钥在代码上；）

非常感谢，

最好的问候，

工厂'

【问题讨论】：

标签： javascript google-maps google-maps-api-3 geocoding

【解决方案1】：

你有一个

 callback=initMap

但我没有看到此名称的功能

你有类似的

<body onunload="GUnload()">

但我没有看到此名称的功能

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

【讨论】：

您好，我添加了一个 InitMap() 函数，所以我的地图已显示，但只调用了“InitMap”函数...而不是其余代码:(
嗨@WalterFabioSimoni initMap 你应该对你的其余代码执行正确的调用..（我没有评估你的目标，只有你的问题..）
嘿，谢谢，我将代码移植到 v3（第一篇文章编辑），我的地图显示。我添加了一个点，但看不到图钉:(有什么想法吗？
我已经测试了你的代码并在控制台中显示 map.getBoundsZoomLevel 不是一个函数（我不知道你是否在某个地方有这个函数..）在这个标记中没有显示，因为你的条件设置不匹配 .. 尝试 .. 在标记绘制之前评估 for 和 if .. 我不能再这样做了 ..
是的，getBoundsZoomLevel 在 v3 上不存在，我被好的取代了。我测试了 For-If，我真的输入了 createMarker() :s

【解决方案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>

我希望这会有所帮助。

【讨论】：

谢谢，请你解释一下，为什么我的图钉不可见，根据我的代码？谢谢:)
new google.maps.Marker() 期望一个具有“位置”和“标题”属性的对象，但您将位置作为自己的参数。
*预期的*属性
var marker = new google.maps.Marker({position: point, title: name});