【问题标题】:Why itsn't displaying marker on map?为什么地图上不显示标记?
【发布时间】:2017-10-20 09:23:48
【问题描述】:

我尝试了不同的代码,但仍然不知道为什么我的标记没有显示。 我一直在搜索和阅读谷歌开发人员文档,并尝试了他们解释的所有方法,但什么也没做。也尝试看看是否有任何 sintax 错误(它必须是......),但由于我是新手,所以看起来没有错误。

那么,有人知道我的代码有什么问题吗?

<?php

get_header(); ?>

<div id="map"></div><!-- #map-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAp9iQ2oC3PEvy20_6aDpAPGLT8sFDqAjI&libraries=geometry,places&signed_in=true"></script>
<script type="text/javascript">
    google.maps.event.addDomListener( window, 'load', gmaps_results_initialize );

    function gmaps_results_initialize() {
        var map = new google.maps.Map( document.getElementById( 'map' ), {
        zoom:           3,
        center:         new google.maps.LatLng( 28.291564, 16.62913 ),
        mapTypeControl: true,
        mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
          position: google.maps.ControlPosition.RIGHT_BOTTOM
       },
       zoomControl: true,
       zoomControlOptions: {
          position: google.maps.ControlPosition.LEFT_CENTER
       },
       scaleControl: true,
       streetViewControl: true,
       streetViewControlOptions: {
          position: google.maps.ControlPosition.LEFT_BOTTOM
       },
       fullscreenControl: true
       });
       var infoWindow = new google.maps.InfoWindow({map: map});

       // Try HTML5 geolocation.
          if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(function(position) {
             var pos = {
             lat: position.coords.latitude,
             lng: position.coords.longitude
             };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Location found.');
            map.setCenter(pos);
            }, function() {
               handleLocationError(true, infoWindow, map.getCenter());
            });
         } else {
           // Browser doesn't support Geolocation
           handleLocationError(false, infoWindow, map.getCenter());
           }

        };      
</script>
<script>
       var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
       var mapOptions = {}
       var map = new google.maps.Map(document.getElementById("map"), mapOptions);
       var marker = new google.maps.Marker({});

      // To add the marker to the map, call setMap();
       marker.setMap(map);
    </script>
<script src="/geo.js"></script>
<?php
get_sidebar();
get_footer();

【问题讨论】:

    标签: javascript google-maps google-maps-markers


    【解决方案1】:

    我认为这是因为您正在为地图创建两个对象。 使地图对象成为常量。不要重新初始化它。

    您已在函数外部添加了标记,这导致它在初始化方法之前执行,该方法将在谷歌地图脚本加载时调用,因此未添加标记,因为地图未初始化。创建单独的方法 TestMarker 并从初始化中调用它。

    function addMarker(location) {
        marker = new google.maps.Marker({
            position: location,
            map: map
        });
    }
    
     function TestMarker() {
           CentralPark = new google.maps.LatLng(37.7699298, -122.4469157);
           addMarker(CentralPark);
    }
    

    在初始化函数中调用TestMarker

    注意:map 在这里是一个常数。

    【讨论】:

    • 你的意思是这样? const map = new google.maps.Map( document.getElementById( 'map' ), 还是不行。不管怎样,谢谢你回答我。
    • 您好,再次感谢您。我在初始化内部调用了 TestMarker 函数,并为您编写的最后一个脚本代码更改了第二个脚本代码。但是,仍然无法正常工作。我感觉自己有点迟钝……
    • 哦,我在 Stack 中没有找到这个问题。无论如何,仍然无法正常工作。我相信我把函数调用放在了错误的地方。现在它甚至没有显示地图...hooct.com/google-maps-api
    • 已经尝试了您发送给我的堆栈溢出链接中的所有选项,但仍然无法正常工作。已将 TestMarker 调用放在所有可能的地方,但仍然无法正常工作。人们告诉 Javascript 这很简单,哈哈哈。
    猜你喜欢
    • 2021-03-31
    • 2016-08-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多