Gmaps.js \\根據用戶所在位置創建新標記

Question

我正在將gmaps.js用於Google Maps API。 目標是創建具有用戶地理位置的地圖並創建新標記。 像“嗨！您在這里！”之類的東西

地圖和地理位置工作正常，但是使用當前用戶坐標創建新標記對我來說是一個問題。

這是代碼：

// public/core.js
//Creating map
var map;
$(document).ready(function(){
      map = new GMaps({
        el: '#map',
        lat: 0,
        lng: 0,
        zoomControl : true,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl : false,
        streetViewControl : false,
        mapTypeControl: false,
        overviewMapControl: false
      });

// Define user location
      GMaps.geolocate({
          success: function(position) {
            map.setCenter(position.coords.latitude, position.coords.longitude);
          },
          error: function(error) {
            alert('Geolocation failed: '+error.message);
          },
          not_supported: function() {
            alert("Your browser does not support geolocation");
          }
      });

// Creating marker of user location
      map.addMarker({
          lat: position.coords.latitude,
          lng: position.coords.longitude,
          title: 'Lima',
          click: function(e) {
            alert('You clicked in this marker');
          },
          infoWindow: {
              content: '<p>You are here!</p>'
            }
    });

}); 

Answer 1

問題是您對map.addMarker的調用假定上面的函數GMaps.geolocate已成功，而實際上只有在success函數解析后才能設置position ：

// public/core.js
//Creating map
var map;
$(document).ready(function(){
      map = new GMaps({
        el: '#map',
        lat: 0,
        lng: 0,
        zoomControl : true,
        zoomControlOpt: {
            style : 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl : false,
        streetViewControl : false,
        mapTypeControl: false,
        overviewMapControl: false
      });

// Define user location
      GMaps.geolocate({
          success: function(position) {
            map.setCenter(position.coords.latitude, position.coords.longitude);


        // Creating marker of user location
              map.addMarker({
                  lat: position.coords.latitude,
                  lng: position.coords.longitude,
                  title: 'Lima',
                  click: function(e) {
                    alert('You clicked in this marker');
                  },
                  infoWindow: {
                      content: '<p>You are here!</p>'
                    }
            });
          },
          error: function(error) {
            alert('Geolocation failed: '+error.message);
          },
          not_supported: function() {
            alert("Your browser does not support geolocation");
          }
      });

});