我的谷歌地图上的标记首先显示并消失

时间:2014-05-31 13:21:14

标签: google-maps google-maps-api-3

我使用API​​ v3使用自定义样式获得了Google地图。问题是我正在向地图添加一个标记来显示一个Location.But当页面加载时,标记会显示几分之一秒然后消失。我使用下面的脚本来创建地图。

请让我知道我该怎么做才能解决这个问题?

    <script type="text/javascript">

     google.maps.event.addDomListener(window, 'load', init);

     function init() {

                var mapOptions = {

                    zoom: 14,


                    center: new google.maps.LatLng(19.235116, 72.8551),



                    styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"on"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]
                };


              var map = new google.maps.Map(document.getElementById('map'), mapOptions);
              var myLatlng = new google.maps.LatLng(19.235116, 72.8551);

  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(19.235116, 72.8551),
      map: map,
      title: 'Photonics Enterprise'
  });

                var mapElement = document.getElementById('map');

              var map = new google.maps.Map(mapElement, mapOptions);
            }

             </script>

1 个答案:

答案 0 :(得分:0)

问题是你正在重写你刚刚创建的地图,因此你在代码执行结束时获得一张新的空地图

试试这个:

<script type="text/javascript">

    google.maps.event.addDomListener(window, 'load', init);

    function init() {
        //map options
        var mapOptions = {

            zoom: 14,
            center: new google.maps.LatLng(19.235116, 72.8551),
            styles: [{featureType:"landscape",stylers:[{saturation:-100},{lightness:65},{visibility:"on"}]},{featureType:"poi",stylers:[{saturation:-100},{lightness:51},{visibility:"simplified"}]},{featureType:"road.highway",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"road.arterial",stylers:[{saturation:-100},{lightness:30},{visibility:"on"}]},{featureType:"road.local",stylers:[{saturation:-100},{lightness:40},{visibility:"on"}]},{featureType:"transit",stylers:[{saturation:-100},{visibility:"simplified"}]},{featureType:"administrative.province",stylers:[{visibility:"off"}]/**/},{featureType:"administrative.locality",stylers:[{visibility:"on"}]},{featureType:"administrative.neighborhood",stylers:[{visibility:"on"}]/**/},{featureType:"water",elementType:"labels",stylers:[{visibility:"on"},{lightness:-25},{saturation:-100}]},{featureType:"water",elementType:"geometry",stylers:[{hue:"#ffff00"},{lightness:-25},{saturation:-97}]}]
        };

        //creating map
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);
        // creating latlng object                 
        var myLatlng = new google.maps.LatLng(19.235116, 72.8551);

        // creating marker and binding it to the map you have just created
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(19.235116, 72.8551),
            map: map,
            title: 'Photonics Enterprise'
        });

        // don't recreate the map, because you'll loose all objects in the map created above!!
        //var mapElement = document.getElementById('map');
        //var map = new google.maps.Map(mapElement, mapOptions);
    }

</script>